canvas 画布使用

canvas 标签
使用js 在上面绘制图形以及动画
属性 width height 设置canvas 的大小 和css不一样 设置的是canvas 画布的大小

 var canvas = document.querySelector("#canvas");
    //设置canvas 画布大小
    canvas.width = 700;
    canvas.height = 400;
    //设置canvas的模型为2d模型
    var context = canvas.getContext("2d");
    //1设置图    形填充的样式
//     context.fillStyle="#e30000";
     //2绘制一个矩形
//     context.fillRect(0,0,100,50);

//     context.fill()//是填充点先路径的

//     绘制圆弧
     context.beginPath(); //开始路径
     context.fillStyle="green";
     context.arc(350,200,100,0,Math.PI*2,true);
     context.stroke();//绘制描边的
     context.fill();//使用样式填充圆的
     context.closePath();//闭合路径

     //绘制线条
     context.beginPath();
     context.strokeStyle="red";//设置描边色
     context.fillStyle="red";
     context.moveTo(0,200);//起始点
     context.lineTo(200,200);//移动点
     context.lineTo(30,350);
     context.lineTo(100,130);
     context.lineTo(170,350);
     context.lineTo(0,200);
     context.stroke();//设置线描边
     context.fill();
     context.closePath();

     //绘制基本的弧形
     context.beginPath();
     context.strokeStyle="red";//设置描边色
     context.moveTo(500,300);//起始点
     //弧
     context.arcTo(600,250,660,300,30);
    context.arcTo
     context.lineTo(700,300);//移动点
     context.stroke();//设置线描边
     context.closePath();

    //绘制线性渐变
    context.beginPath();
     var line=context.createLinearGradient(200,100,200,200);
     //添加线性渐变的颜色
     line.addColorStop(0,"blue");
     line.addColorStop(0.2,"red");
     line.addColorStop(0.4,"green");
     line.addColorStop(0.6,"orange");
     line.addColorStop(0.8,"yellow");
     line.addColorStop(1,"pink");
     context.fillStyle=line;
     context.fillRect(100,100,200,100);
     context.closePath();

    //绘制圆形渐变
    context.beginPath();
     var arcgradient=context.createRadialGradient(350,200,10,350,200,100);
     arcgradient.addColorStop(0,"blue");
     arcgradient.addColorStop(0.2,"red");
     arcgradient.addColorStop(0.4,"green");
     arcgradient.addColorStop(0.6,"orange");
     arcgradient.addColorStop(0.8,"yellow");
     arcgradient.addColorStop(1,"pink");
     context.fillStyle=arcgradient;
     context.arc(350,200,100,0,Math.PI*2,true);
     context.fill();
     context.closePath();
     //清除绘制的区域

     context.clearRect(330,180,40,40);

    //绘制图片
     context.beginPath();
     var image=new Image();
     image.src="https://fc3tn.baidu.com/it/u=3025909226,1763324618&fm=202&src=bqdata";

     context.drawImage(image,0,0,700,400);
     //绘制的时候剪裁
     context.moveTo(500,200);
     context.lineTo(530,200);
     context.arcTo(550,160,570,200,20);
     context.lineTo(570,200);
     context.lineTo(600,200);
     context.lineTo(600,300);
     context.lineTo(500,300);
     context.lineTo(500,200);
     context.clip();
     context.fillStyle="#fff";
     context.fill()
     context.strokeStyle="red";
     context.stroke();

     context.closePath();

    //绘制文字
     var line=context.createLinearGradient(200,100,300,150);
     //添加线性渐变的颜色
     line.addColorStop(0,"blue");
     line.addColorStop(0.2,"red");
     line.addColorStop(0.4,"green");
     line.addColorStop(0.6,"orange");
     line.addColorStop(0.8,"yellow");
     line.addColorStop(1,"pink");
     context.font="30px SimSun, Songti SC";
     context.shadowColor="pink";
     context.shadowBlur=2;
     context.shadowOffsetX=10;
     context.shadowOffsetY=10;
     context.fillStyle=line;
     context.fillText("Canvas",200,100,200);
    //绘制线条
    context.beginPath();
    context.lineWidth = 10;
    context.strokeStyle = "blue";//设置描边色
    context.fillStyle = "red";
    context.moveTo(0, 200);//起始点
    context.lineTo(200, 200);//移动点
    context.lineTo(30, 350);
    context.lineTo(100, 130);
    context.lineTo(170, 350);
    context.lineTo(0, 200);
    context.stroke();//设置线描边
    context.fill();
    context.save();//保存

    //使用restore  取出
    context.restore();
    context.fill();
    context.stroke();
    context.closePath();

来源：51CTO

作者：wx5dad8c26324df

链接：https://blog.51cto.com/14584021/2480147