前端绘图方式Canvas和SVG

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性能比较

一般情况下，随着屏幕大小的增大，画布将开始降级，因为需要绘制更多的像素。随着屏幕上的对象数目增多，SVG开始逐渐和canvas拉开差距以下方面的不同一定也会引起变化：实现和平台、是否使用完全硬件加速的图形，以及js引擎的速度。

svg API参考手册

canvas API参考手册 

下面是一些我在开发过程中遇到的一些问题。

---

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();                                              //边框绘制            （两个都调用，才能得到蓝边框红内容的）