前端canvas基础

什么是canvas(画布）

• 是html5新增的元素，可用于通过使用js的脚本来绘制图形，创建动画。canvas最早由Apple引入Webkit。

canvas使用入门

1. 使用标签来定义一个canvas元素。例如。canvas元素默认具有高度：width:300px;height:150px
   注意：宽高必须使用标签属性设置，弱设用CSS样式设置宽高，会导致绘制的图像尺寸不对

2. 使用js代码获取canvas的上下文拿到画笔：var canvas=document.querySelector("#test") if(canvas.getContext){ var ctx=canvas.getContext("2d") }

canvas绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形，所有其他的图形的绘制都至少需要生成一条路径。

1. 绘制矩形

方法	说明
fillRect(x,y,width,height)	绘制一个填充的矩形（默认填充色黑色）
strokeRect(x,y,width,height)	绘制一个矩形的边框（默认边框：一像素实心黑色）
clearRect(x,y,width,height)	清除指定矩形区域，本质让指定区域完全透明，但不包括边框
fillStyle	设置图形的填充颜色
strokeStyle	设置图形轮廓的颜色
lineWidth	设置线的粗细，默认为1，即往上0.5，往下0.5
lineJoin	设定线条与线条连接处的样式[miter][bevel][round]，默认miter

注意：因为画布画的线在像素的相交线上，画边框时会上面画0.5px,下面画0.5px,而css像素会把0.5转化为1。所以本应该是1px厚度的边框，会画成2px。如果要使边框为1px，就应该x+0.5，y+0.5。

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连练成的不同形状的点的集合。

				ctx.save()			//保存之前设置的样式到栈空间
				ctx.beginPath()	//清空以前的路径
				
				ctx.moveTo(50,50)	//移到路径起始点
				ctx.lineTo(50,100)	//第一条路径
				ctx.lineTo(100,100)	//第二条路径
				ctx.lineTo(50,50)	//第三条路径
				ctx.stroke()	//画出路径
				
				ctx.restore() 	//将栈空间里的样式释放出来

方法	说明
stroke()	画出路径
fill()	填充路径，可自动合并路径
closePath()	合并路径
beginPath()	清空路径容器
rect(x,y,width,height)	绘制坐标为x,y宽高为width,height的矩形路径
lineCap	指定线的两头形状，默认butt。[butt] [round] [square]
save()	将之前的样式保存在栈空间（变形矩阵，剪切区域，虚线列表，strokeStyle,fillStyle,lineCap,lineJoin）
restore()	释放在栈空间保存的样式

• 相关概念
  –>路径容器:调用路径api时，往路径容器做登记；每次调用beginPath，清空路径容器
  –>样式容器：调用样式api时，往样式容器做登记；每次调用save，将样式容器里的状态压入样式栈；每次调用restor，将样式栈顶状态弹出到样式容器里，进行覆盖
  –>样式栈：save和restor管理样式栈

canvas绘制圆形

方法	说明
arc(x,y,radius,startAngle,endAngle,counterclockwise)	(x,y)原心，radius圆半径，加上开始和结束角度，顺时针画圆路径
arcTo(x1,y1,x2,y2,radius)	需要moveTo到一个开始点，然后与控制点1（x1,y1）相连成直线，然后控制点1（x1,y1）和控制点2(x2,y2)相连成直线，再用半径为radius的圆靠拢这个角，最后只留下圆弧部分
quadraticCurveTo(cpx,cpy,x,y)	需要起始点moveTo,（cpx,pcy）为一个控制点，x,y为结束点。
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)	需要起始点moveTo，(cp1x,cp1y)为控制点一，（cp2x,cp2y）为控制点二，(x,y)为结束点

1. 画圆弧原理：

				var ctx=canvas.getContext("2d")
				ctx.beginPath(); 
				ctx.moveTo(20,20);           // 开始点
				ctx.arcTo(150,20,150,70,70); // (20,20)与(150，20)形成直线，（150，20）与(150，70)形成直线，两直线相交得一个角,再以半径为70的圆怼向相交点，直到两边相切，然后去掉多余部分，留下圆弧
				ctx.stroke();                // 画线

2. 二次贝塞尔曲线原理：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点

3. 三次贝塞尔曲线原理：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。

弧线是两条直线相交，再加上一个圆与这两条直线相切，这个整体的一部分

canvas变形

方法	说明
translate(x, y)	移动canvas 的坐标原点(坐标变换)。
rotate(angle)	旋转的中心是坐标原点。
scale(x, y)	canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半

scale原理：放大->一个css像素占据更多面积。缩小->一个CSS像素占据更少面积。放大或缩小不会改变css像素总个数

canvas之API汇总

画布API	说明
getContext(“2d”)	返回上下文对象（画笔）
width	返回画布宽度
height	返回画布高度

上下文API	说明
fillRect(x,y,w,h)	填充矩形
strokeRect(x,y,w,h)	带边框的矩形
clearRect(x,y,w,h)	清除矩形内容
fillStyle	设置填充颜色
strokeStyle	设置边框颜色
lineWidth	设置线的宽度
lineCap	设置线两头样式
moveTo(x,y)	移动画笔
lineTo(x,y)	画一个路径
rect(x,y,w,h)	画一个矩形路径
fill()	填充
stroke()	画线
beginPath()	清楚路径容器
closePath()	闭合路径（fill可自动闭合，stroke需手动闭合）
save()	将画布当前状态（样式相关 变换相关）压入到样式栈中
restore()	将样式栈中栈顶的元素弹到样式容器中，图像渲染依赖于样式容器
arc(x,y,r,startAngle,endAngle,counterclockwise)	画一个圆的路径
arcTo(x1,y1,x2,y2,r)	画一个圆弧
quadraticCurveTo(x1,y1,x2,y2)	画二次贝塞尔曲线路径
bezierCurveTo(x1,y1,x2,y2,x3,y3)	画三次贝尔塞尔曲线路径