canvas的基础使用用法

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;margin: 0
        }
    #cvs{
        border: 1px solid #ddd

    }
    </style>
</head>
<body>
   <canvas id="cvs" width="500" height="400"></canvas>
</body>
<script>
   var cvs=document.getElementById("cvs")
   var ctx=cvs.getContext("2d");
//    ctx.beginPath();
//    ctx.moveTo(100,50)
//    ctx.lineTo(150,50)
//    ctx.lineTo(150,100)
//    ctx.lineTo(100,100)
//    ctx.closePath();

//    ctx.strokeStyle="blue";
//    ctx.stroke()

//矩形
//    ctx.beginPath();
//    ctx.fillStyle="red";
//    ctx.fillRect(100,150,100,100)
//    ctx.closePath();
//原形

// ctx.beginPath();
// ctx.arc(150,150,100,0,2*Math.PI,false)
// ctx.closePath();
// ctx.lineWidth=5;
// ctx.strokeStyle="blue";
// ctx.stroke();
// ctx.fillStyle="red";
// ctx.fill()
    // 贝塞尔
    // ctx.beginPath();
    // ctx.moveTo(50,50);
    // ctx.quadraticCurveTo(60,300,260,160);
    // ctx.strokeStyle="red";
    // ctx.stroke()
// 文本
// ctx.beginPath();
// ctx.font="bold 50px 宋体"
// // ctx.strokeStyle="red";
// ctx.fillStyle="red";

// ctx.fillText("你好,小潘栋hahah",50,50);
//  ctx.strokeText("你好,小潘栋hahah",50,50);
// ctx.closePath()
//渐变
// var lg=ctx.createLinearGradient(100,100,200,200);
// lg.addColorStop(0.1,"red")
// lg.addColorStop(0.4,"blue")
// lg.addColorStop(0.7,"green")
// lg.addColorStop(0.9,"yellow")
// ctx.beginPath();
// ctx.fillStyle=lg;
// ctx.fillRect(100,100,100,100);
// ctx.closePath();
// var lg=ctx.createRadialGradient(200,200,20,200,200,100);
// lg.addColorStop(.1,"red")
// lg.addColorStop(.3,"pink")
// lg.addColorStop(.5,"green")
// lg.addColorStop(.7,"yellow")
// lg.addColorStop(.9,"blue")
// ctx.beginPath();
// ctx.arc(200,200,100,0,1.5*Math.PI,false);
// ctx.fillStyle=lg;
// ctx.fill();
// ctx.closePath();
// ctx.clearRect(0,0,cvs.width,200)

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     *{
         padding: 0;
         margin: 0;
     }
     #cvs{
         border: 1px solid #ddd;
     }
    </style>
</head>
<body>
    <canvas id="cvs" width="800" height="600"></canvas>
</body>
<script>
    var cvs =document.getElementById("cvs")
    var ctx=cvs.getContext("2d");
// 新图
    // ctx.beginPath();
    // ctx.arc(150,150,100,0,2*Math.PI,false);
    // ctx.fillStyle="red";
    // ctx.fill();
    // ctx.closePath();
   
    // ctx.globalCompositeOperation="lighter"
// 旧图
    // ctx.beginPath();
    // ctx.arc(200,150,100,0,2*Math.PI,false);
    // ctx.fillStyle="blue";
    // ctx.fill()
    // ctx.closePath();
   
    //图片
    ctx.beginPath();
    var img=new Image();
    img.src="./images/1.jpg";
    img.onload=function(){
        ctx.drawImage(img,0,0)
        var pat=ctx.createPattern(img,"repeat-x");
        ctx.fillStyle=pat;
        ctx.fillRect(0,0,500,300);

        var url=cvs.toDataURL("image/jpeg",1)
        var img2=new Image();
        img2.src=url;
        document.body.appendChild(img2)
        var data=ctx.getImageData(50,60,100,100)
                 ctx.putImageData(data,450,450)
    }
//    ctx.beginPath();
//    ctx.fillStyle="blue";
//    ctx.fillRect(40,80,200,200);
//    var data=ctx.getImageData(50,60,100,100)
//      ctx.putImageData(data,450,450)
//    ctx.closePath()

    //盒阴影
    // ctx.beginPath();
    // ctx.shadowColor="red";
    // ctx.shadowBlur=20;
    // ctx.shadowOffsetX=10;
    // ctx.shadowOffsetY=10;
    // ctx.arc(150,150,100,2*Math.PI,false);
    // ctx.fillStyle="yellow";
    // ctx.fill();
   //字阴影
    // ctx.closePath();
    // ctx.beginPath();
    // ctx.shadowColor="red";
    // ctx.shadowBlur=10;
    // ctx.shadowOffsetX=5;
    // ctx.shadowOffsetY=5;
    // ctx.font="60px 微软雅黑";
    // // ctx.fillText("潘栋",100,100);
    // ctx.strokeText("潘栋",100,100);
    
    // ctx.closePath()
</script>
</html>

canvas的基础使用用法

代码：

猜你喜欢