一、Canvas绘制图形
绘制路径
| 方法 | 描述 |
|---|---|
| fill() | 填充当前绘图（路径） |
| stroke() | 通过线条来绘制图形轮廓，不会自动调用classpath,绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| closePath() | 闭合路径之后图形绘制会重新回到起点，创建从当前点回到起始点的路径 |
| lineTo() | 添加一个新点，创建从该点到最后指定点的线条 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
| isPointInPath() | 如果指定的点位于当前路径中，返回布尔值 |
康康案例（一）绘制圆形
/*
绘制圆形
g.arc(x,y,r,startAngle,endAngle,anticlockwisc)
startAngle:弧度开始 endAngle：弧度结束
anticlockwisc：可选的，规定应该是逆时针还是顺时针绘图
默认false顺时针 true逆时针
*/
//绘制顺时针圆弧
g.fillStyle = "red";
g.beginPath();
g.arc(50,50,40,0,Math.PI*2);
g.closePath();
g.fill();
康康案例（二）
康康案例（三）绘制贝塞尔曲线
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
//创建画笔
var g = canvas.getContext("2d");
/*
quadraticCurveTo绘制二次贝塞尔曲线
quadraticCurveTo(cpx,cpy,x,y)
(cpx,cpy)绘制点坐标
(x,y)结束点的坐标
*/
g.beginPath();
g.moveTo(10,200);//起始点
//绘制二次贝塞尔曲线
g.quadraticCurveTo(40,100,200,200);
g.stroke();
g.beginPath();
g.rect(10,200,10,10);//开始点
g.rect(40,200,10,10);//控制点
g.rect(200,200,10,10);//结束点
g.fill();
/*
创建三次贝塞尔曲线
bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
*/
g.beginPath();
g.moveTo(10.270);//起始点
g.bezierCurveTo(300,305,310,340,200,270);
g.stroke();
</script>
二、绘制贝塞尔曲线
什么是贝塞尔曲线
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。
一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。
贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。
一次贝塞尔曲线(线性贝塞尔曲线)
一次贝塞尔曲线其实是一条直线。
二次贝塞尔线
三次贝塞尔线
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
//创建画笔
var g = canvas.getContext("2d");
/*
quadraticCurveTo绘制二次贝塞尔曲线
quadraticCurveTo(cpx,cpy,x,y)
(cpx,cpy)绘制点坐标
(x,y)结束点的坐标
*/
g.beginPath();
g.moveTo(10,200);//起始点
//绘制二次贝塞尔曲线
g.quadraticCurveTo(40,100,200,200);
g.stroke();
g.beginPath();
g.rect(10,200,10,10);//开始点
g.rect(40,200,10,10);//控制点
g.rect(200,200,10,10);//结束点
g.fill();
/*
创建三次贝塞尔曲线
bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
*/
g.beginPath();
g.moveTo(10.270);//起始点
g.bezierCurveTo(300,305,310,340,200,270);
g.stroke();
</script>
三、绘制图形
1、lineCap 是 canvas 2D API，指定如何绘制每一条线段末端的属性
有3个可选值：
（1）butt： 线段某段以方形结束
（2）round: 线段末端以圆形结束
（3）square： 线段末端以方形结束，但是多出来一个宽度和线宽一样，高度是线段厚度一半的矩形区域，默认值就是butt;
var lineCaps =["butt","round","square"]
for (var i = 0; i < 3; i++) {
ctx.beginPath();
ctx.moveTo(20 + 30 * i, 30)
ctx.lineTo(20 + 30 * i, 100)
ctx.lineWidth=20;
ctx.lineCap =lineCaps[i]
ctx.stroke()
}
// 绘制两端线段
ctx.beginPath();
ctx.moveTo(0,30);
ctx.lineTo(300,30)
ctx.moveTo(0,100);
ctx.lineTo(300,100);
ctx.lineWidth=1;
ctx.strokeStyle='#FF1493'
ctx.stroke()
2、lineJoin 在同一个path内，设定线条与线条间接合的样式
有三个可选值：
（1）round: 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径就是线段的宽度
（2）**bevel：**在相连部分的末端填充一个额外的，以三角形为底的区域，每一个部分都有各自的矩形
（3）miter：(默认) 相连部分的额外边缘，相交于一点，形成一个额外的菱形区域
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var g = canvas.getContext("2d");//绘制画笔
var lineJoins = ["round","bevel","miter"];
g.lineWidth = 20;
//绘制W
for (var i = 0; i < lineJoins.length; i++){
g.lineJoin= lineJoins[i]
g.beginPath();
g.moveTo(50,50 + i * 50)
g.lineTo(100,100 + i * 50);
g.lineTo(150,50 + i * 50);
g.lineTo(200,100 + i * 50);
g.lineTo(250,50 + i * 50);
g.stroke()
}
</script>
3、setLineDash: 绘制虚线
// [实线长度，间隔长度]
ctx.setLineDash([20,5])
4、绘制文本
canvas提供了两种方法来绘制文本
1、ctx.fillText(tetx,x,y,maxwidth) 绘制填充文本
2、ctx.strokeText(tetx,x,y,maxwidth) 绘制轮廓文本
5、绘制图片:
canvas提供了一个方法：drawImage(img,x.y)
ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
img:图像源
sx,sy,sw,sh:源图像切片位置和大小
dx,dy,dw,dh:定义切片的目标显示位置和大小
四、save与restore
save(): 保存画布(canvas)的所有状态
restore(): 恢复画布(canvas)的所有状态
五、变 换 API
（一）translate和css3中的区别？
canvas的会进行累加，css3的不会； translate：移动的是原点
六、合成 API
合成： 在前面的所有例子中，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制。不过，我们可以利用
globalCompositeOperation 定义和用法
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标的图像上
（一）源对象：
source-over:默认值 在源图像上面,新的图层比较高
source-in:是指留下源图像与目标图像重叠部分(相交部分)
source-atop:砍掉目标溢出部分
source-out:只留下源超过目标的部分
顺序限制 只能放在图形绘制之前
ctx.globalCompositeOperation = "source-out";
（二）目标：
destination-over:目标在上面,旧的图层高
destination-in:是指留下源图像与目标图像重叠部分(相交部分)
destination-atop:砍掉目标溢出来的部分
destination-out:留下目标超出的部分
globalAlpha透明度
案例—绘制月亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas合成</title>
<style type="text/css">
*{
margin: 0px;padding: 0px;}
/* canvas的默认颜色不是白色，默认颜色是根页面颜色一样 */
html,body{
background-color: pink;}
#mycanvas{background-color: black;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle="#fff";
ctx.beginPath();
ctx.arc(200,200,100,2*Math.PI,false);
ctx.fill();
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation = "destination-out"
ctx.fillStyle = "red";
ctx.arc(150,200,100,2*Math.PI,false);
ctx.fill();
ctx.restore();//释放
</script>
</body>
</html>
Canvas动画
（一）动画的基本步骤
1、清空canvas再绘制每一帧动画之前，需要清空所有，清空所有最简单的做法是clearRect()方法
2. 保存 canvas 状态 如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等),又
在绘制每一帧时都是原始状态的话，则最好保存下 canvas 的状态
3. 绘制动画图形这一步才是真正的绘制动画帧
4. 恢复 canvas 状态如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复
canvas 状态。
绘制 – 清空 —绘制 —清空 。。。。。
控制动画
我们可用通过 canvas 的方法或者自定义的方法把图像会知道到 canvas 上。正常情况，我们能看到绘制的结果是在脚本执行结束之后。例如，我们不可能在一个 for 循环内部完成动画。
4. 也就是，为了执行动画，我们需要一些可以定时执行重绘的方法。
5. 一般用到下面三个方法：
setInterval()
setTimeout()
requestAnimationFrame()