Canvas 和 SVG 都允许我们在浏览器中创建图形，但是它们在根本上是不同的。
Svg
1、 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。（支持事件处理，容易编辑）
2、 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
3、SVG是基于矢量的（不依赖分辨率，放大不失帧）
4、不适合游戏应用（SVG要加载到DOM中，所以性能上不如canvas）
canvas
1 、Canvas 通过 JavaScript 来绘制 2D 图形
2、在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，（不断重绘的过程）
3、不支持事件处理器
4、像素图（依赖分辨率）
5、能够以 .png 或 .jpg 格式保存结果图像
对于我们平常开发而言最直观的区别在于：
1.对于画在Canvas上的部件，你需要处理重绘。而SVG则不用，你修改svg dom则系统会自动帮你重绘
2.Hittest，即canvas不负责帮你侦测鼠标/触摸事件发生在哪一个图形元件上；而svg可以。
3.Canvas效率高得多
那我们应该在什么时候使用Canvas什么时候使用svg呢？
一般情况下，随着屏幕大小的增大，画布将开始降级，因为需要绘制更多的像素。随着屏幕上的对象数目增多，SVG开始逐渐和canvas拉开差距以下方面的不同一定也会引起变化：实现和平台、是否使用完全硬件加速的图形，以及js引擎的速度。
下面是一些我在开发过程中遇到的一些问题。
1 、当需要根据后台返回数据，设置canvas的fillstyle的时候，由于是定时不断的取这些数据，设置5秒就需要重绘一遍，于是时间越长我绘制图像的颜色一直在变，越来越深
解决： canvas绘制动画的时候,每一步都是不断重绘的过程。所以在每一次动画前都需要清除画布
ctx.clearRect(0,0,canvasWidth,canvasHeight) //清除画布
2 、在绘制动画的时候，要确保当图片加载进来后在进行绘制。
image.onload=function( ) { start() } //start（）是动画开始
3、在想要绘制不同颜色的图形时，要先填充颜色！在绘制图形！！！
ctx.fillStyle="red"; // fillStyle是设置图形填充颜色 （边框和填充默认是黑色！）
ctx.strokeStyle="blue"; //strokeStyle是设置图形边框颜色
ctx.fill(); //填充绘制
ctx.stroke(); //边框绘制 （两个都调用，才能得到蓝边框红内容的）
