HTML5 Canvas

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

var canvas = document.querySelector("#canvas");
//设置canvas 画布大小
canvas.width = 700;
canvas.height = 400;

3：设置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,66 0,300,30);
 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();