canvas 画布

1、canvas 是H5 新加入的标签 用来在页面中绘制图形 一般称之为画布。
2、canvas的宽高要以属性的形式设置，而不是css；
3、canvas 本身并不具备图形绘制能力 一切都是由canvas 的内置的 context对象来完成。
获取canvas标签

var cvs=document.getElementById("cvs");

getContext(参数) 来获取context对象

var cas=cvs.getContext("2d");

4、canvas 提供了两种绘制方式

① fill() 填充
② stroke() 绘制边框

5、绘制一条线段的过程

   var cvs = document.querySelector("canvas");
   var cxt = cvs.getContext(“2d");
   cxt.beginPath();  //开始一条路径
   cxt.moveTo(10,100);  //线段起始点
   cxt.lineTo(200,100);  //线段结束点
   cxt.stroke();  //进行绘制
   cxt.closePath();  //结束一条路径

设置笔簇的宽度 ctx.lineWidth=5;

设置圆角 cvs.lineCap = “round”

but (平，默认) round（圆角)square（方角）

设置笔簇的颜色cxt.strokeStyle = "pink";

还支持 rgb rgba
十六进制等颜色表示形式

清除一个矩形区域的内容

ctx.clearRect(0,0,cvs.width,cvs.height)

创建并绘制矩形的两种方法

①
cxt.rect(10,10,100,100); //创建一个矩形
ctx.stroke(); //绘制边框
②
ctx.strokeRect(x,y,w,h); //创建并直接绘制一个矩形

绘制弧形

ctx.arc(x,y,r,star,end,n) //绘制一段弧
ctx.stroke();

//x 圆心的x坐标
//y 圆心的y坐标
//r 半径
//star 起始角 以弧度计算(弧的圆心的三点钟位置是0度)
//end 结束角
//n 是否逆时针 true：逆时针 false：顺时针（默认）

fill填充

① 填充矩形区域

cxt.beginPath();
cxt.rect(20,20,100,100);
cxt.fill(); //填充创建的矩形区域
cxt.closePath();
②
ctx.fillRect(20,20,100,100);

填充 创建的一个圆

cxt.beginPath();
cxt.arc(150,150,100,0,2 * Math.PI,false);
cxt.fill(); //
cxt.closePath();
ctx.fillStyle = "pink"; 设置颜色

线性渐变

ctx.beginPath();
//创建一个渐变对象前两个参数为起始位置的点后两个参数为结束位置的点
var lg = ctx.createLinearGradient(0,100,300,0);
//给渐变添加颜色 第一个值为颜色的起始位置第二个为添加的颜色值
lg.addColorStop(0,'red');
lg.addColorStop(1,"blue");
ctx.fillStyle = lg;//将填充的颜色设置成渐变
ctx.fillRect(0,100,300,100);
ctx.closePath();

径向渐变

ctx.beginPath();
//创建一个径向渐变对象 起始圆心坐标 起始半径
//结束圆心坐标 结束半径
var rg = ctx.createRadialGradient(150,150,50,150,150,100);
rg.addColorStop(0,'red');
rg.addColorStop(1,"blue");
ctx.fillStyle = rg;
ctx.arc(150,150,100,2 * Math.PI,false);
ctx.fill();
ctx.closePath();

创建图片的过程

//ctx.drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh)
//Image:就是dom里面的真实图片
//sx:图片左上顶点的x坐标
//sy:图片左上顶点的y坐标
//sw:矩形区域的宽度 去截取图片的宽
//sh:矩形区域的高度 去截取图片的高
//dx:画在canvas上面的x坐标
//dy:画在canvas上面的y坐标
//dw:画出来的宽度
//dh:画出来的高度
// sx,sy,sw,sh:是截取图片的过程
// dx,dy,dw,dh:把截取出来的图片放到canvas里面的过程