其实canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。但是canvas的API实在是有点多，对于初学者来说，可能学到一半就止步不前了。我也有这种感觉，在学习的过程中，编写实例，用到了其中很多的属性和方法，但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API，方便以后查阅，也顺便造福一下大家。
@H_404_3@开始之前
如果你的浏览器是IE8及以下，那么很遗憾，上面那段文字会被渲染出来！而且下面的方法也都不能使用了；所以请使用支持canvas的浏览器来使用后面的方法。
另外我们可以还可以得到容器的宽和高度
canvas只是一个容器，本身没有绘制的能力，所以我们要得到一个画布ctx，使之具有绘制各种图形的能力。下文所有的方法都是ctx的方法。
@H_404_3@绘制
绘制一个矩形：
绘制路径:
说明：
- fill()和stroke()函数表示绘图结束。如果要继续绘制，需要重新新建路径（beginPath()）。
- 如果lineTo()最后的路径没有封闭，fill()函数会自动封闭路径，而stroke()函数不会。
例：绘制一个三角形
@H_404_3@样式
404_3@颜色
404_3@线段端点
效果如下图：
404_3@线段连接处
ctx.lineJoin = 'miter(默认)'、round(圆角)、`bevel(横线)` //两线段连接处所显示的样子
效果如下图：
404_3@虚线
效果如下图：
404_3@渐变
效果如下图：
效果如下图：
效果如下图：
@H_404_3@图像
这里的img可以是一个img对象，也可以是一个img元素。
另外，绘制图片的时候还可以对图片进行缩放，类似于css中的background-size：
ctx.drawImage(img,w,h); //w、h指定图片的宽高，则会同比例缩放。
@H_404_3@变形
慢慢的从这里开始，就要开始涉及到复杂的绘制了。而开始复杂的绘制之前，我们得先了解一个概念：canvas绘图的状态。
404_3@状态
canvas 的状态就是当前画面应用的所有样式和变形的一个快照。另外，用来操作这个状态的有两个方法：save()和restore()。
save()用来保存当前状态，restore()用来恢复刚才保存的状态。他们都可以多次调用。
效果如下图：
404_3@位移(translate)
ctx.translate(x,y); //更改canvas的原点
效果如下图：
404_3@旋转
ctx.rotate(Math.PI * 2) //参照原点顺时针旋转360度
效果如下图：
404_3@缩放
ctx.scale(x,y); //基于原点缩放，x、y是两个轴的缩放倍数
本来绘制的是一个半径为60的圆形，但是经过缩放之后，实际效果如下：
@H_404_3@动画
@H_404_3@元素的位置移动，就形成了动画。
一帧一帧的来渲染这个元素，而且这个元素每一帧的位置都不一样，我们的眼睛看到的就是动画了。实现起来也很方便，js提供了两个方法：setTimeout 和setInterval都可以实现，但是一个有逼格的程序员实现动画是不会用这两个方法的，而是用requestAnimationFrame这个方法。有什么区别呢？下面简单做个比较。
- setInterval(myFun,10); 意思是隔一毫秒执行一个myFun函数，但是这样就有一个问题了，比如我myFun函数里面绘制的东西比较耗时，而10ms之内还没有完全绘制出来，但是这段代码强制1ms之后又开始绘制下一帧了，所以就会出现丢帧的问题；反之，如果时间设置太长，就会出现画面不流畅、视觉卡顿的问题。
- requestAnimationFrame(myFun); 如果我们这样写，又是什么意思呢？意思是根据一定的时间间隔，会自动执行myFun函数来进行绘制。这个”一定的时间间隔”就是根据浏览器的性能或者网速快慢来决定了，总之，它会保证你绘制完这一帧，才会绘制下一帧，保证性能的同时，也保证动画的流畅。
@H_404_3@结语
这些API已经包含了大部分常用的了，结合requestAnimationFrame函数已经可以绘制很多酷炫的效果了。但是光看这些API很简单，但是想要在绘制游戏或者动画中用起来得心应手还需要看大量的实例，自己实践总结的。
本文就到这里，感谢各位看官～
原文链接：https://www.f2er.com/js/43022.html