使用canvas绘制圆弧动画

效果预览

canvas 绘制基本流程

初始画布

对于canvas的绘制，首先需要在html内指定一块画布，即<canvas></canvas>, 可以看做是在PS中新建一个空白文档，之后所有的操作都将呈现在这个文档之上，与PS的区别是，canvas本身没有图层的特性，当需要展示不同维度的视图时，需要交由html的位置关系来解决。

canvas标签上，值得一提的就是width和height两个属性，这两个属性代表着画布的宽高，与canvas样式上的宽高有很大区别。在浏览器当中，看到的图形绘制大小，本身是由canvas.style.width/canvas.style.height决定的，他们决定了canvas这个dom元素的大小关系，而canvas.width和canvas.height决定的是canvas内部图形的大小关系。当这两个宽高比不同时，就会产生视觉上的形变。即，把canvas.style.height放大为2倍时，显示效果会被拉伸：