Html5 之Canvas [画布]

2021-12-25 01:32:49
编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 填充
        function bbs() {
            let canvas = document.getElementById(‘canvas‘);
            let canvastxt=canvas.getContext(‘2d‘);
            canvastxt.fillStyle="#ffff00";
            canvastxt.fillRect(0,0,123,645);
        }
        // 填充画线
        function bbs1() {
            let canvas = document.getElementById(‘canvas‘);
            let ctx=canvas.getContext(‘2d‘);
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(200,100);
            ctx.closePath();
            ctx.stroke();
        }
        // 画圆
        function bbs2(){
            let canvas = document.getElementById(‘canvas‘);
            let ctx=canvas.getContext(‘2d‘);
            ctx.beginPath();
            ctx.arc(295,100,40,0,2*Math.PI);
            ctx.closePath();
            ctx.stroke();
            // ctx.save();
        }
        // 绘制文本
        function bbs3(){
            let canvas = document.getElementById(‘canvas‘);
            let ctx = canvas.getContext(‘2d‘);
            ctx.font = ‘30px Vladimir Script‘;
            ctx.fillText("hello word",50,100);
        }
        function bbs4(){
            let canvas = document.getElementById(‘canvas‘);
            let ctx = canvas.getContext(‘2d‘);
            ctx.font = ‘50px Segoe Script ‘;
            ctx.strokeText("hello word",150,200);
        }
        //渐变
        function bbs5(){
            let canvas = document.getElementById(‘canvas‘);
            let ctx = canvas.getContext(‘2d‘);
            let grd=ctx.createLinearGradient(0,0,550,600);
            grd.addColorStop(0,"red");
            grd.addColorStop(1,"white");
            ctx.fillStyle=grd;
            ctx.fillRect(10,10,600,675)
        }
        function bbs6(){
            let canvas = document.getElementById(‘canvas‘);
            let ctx = canvas.getContext(‘2d‘);
            let grd=ctx.createLinearGradient(175,50,5,190,60,100);
            grd.addColorStop(0,"red");
            grd.addColorStop(1,"white");
            ctx.fillStyle=grd;
            ctx.fillRect(100,10,250,180)
        }
        // 图像画布
        function bbs7(){
            let canvas = document.getElementById(‘canvas‘);
            let ctx = canvas.getContext(‘2d‘);
            let img = document.getElementById("scream");
            ctx.drawImage(img, 10, 10);
        }
        // 清除
        function bbs8(){
            //方法1
            // let canvas=document.getElementById("canvas").innerHTML=‘ ‘;

            //方法2
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, 800, 400);
            

            // let canvas = document.getElementById("canvas");
            // let ctx = canvas.getContext("2d");
            // ctx.height = ctx.height;

            // ctx.clearRect(canvas.width,canvas.height);

            // obj.innerHTML=‘‘;
        }
        //保存
        function bbs9(){

            let canvas = document.getElementById(‘canvas‘);
            let ctx = canvas.getContext(‘2d‘);
            let a =document.createElement(‘a‘);
            a.href=canvas.toDataURL();
            a.download="save";
            a.click();


            // canvas.width=imgWidth;
            // canvas.height=imgHeight;
            // ctx.drawImage(img,0,0,imgWidth,imgHeight);
            // dataUrl=canvas.toDataURL(type);
            // console.log(dataUrl);
            // callback && callback(dataUrl)
            // return dataUrl;
            // let a=document.captureEvents("a");


        }



    </script>
    <h1>小向同学</h1>

    <canvas id="canvas" width="800" height="400" style="border:1px solid #000000"></canvas>
    <img id="scream" src="img/img2.jpg" alt="the quick" width="72" height="72"></img>
    <br>
    <button id="btn" onclick="bbs()">填充</button>
    <button id="btn1" onclick="bbs1()">填充画线</button>
    <button id="btn2" onclick="bbs2()">画圆</button>
    <button id="btn3" onclick="bbs3()">绘制文本-实心</button>
    <button id="btn4" onclick="bbs4()">绘制文本-空心</button>
    <button id="btn5" onclick="bbs5()">线性渐变</button>
    <button id="btn6" onclick="bbs6()">圆形渐变</button>
    <button id="btn7" onclick="bbs7()">图像画布</button>
    <button id="btn8" onclick="bbs8()">清除</button>
    <button id="btn9" onclick="bbs9()">保存</button>
    
</body>
</html>
运行结果

Html5 之Canvas [画布]
码农公寓

编写代码

运行结果

相关文章
