Canvas和Svg有什么区别?

Canvas 和 SVG 都允许在浏览器中创建图形，但是它们在根昌陪本上是不同的。

Canvas

描述：

通过Javascript来绘制2D图形。

是逐像素进行渲染的。

其位置发生改变，会重新进行绘制。

SVG

描述：

一种使用XML描述的2D图形的语言

SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

比较

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够耐枯蠢以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地败笑图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用

微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas

下面全是我一点点测试出的干货，耐心看：

1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；

2.wxcanvas不要当成真的H5canvas，就当它是个div就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；

3.改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；

4.css transform变换中的变大缩小也无法改变原画布上的东西大小

5.官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于皮斗多个<canvas/>。

实际上，context.getActions()后，context中的信息会被清空，如果想重复利用，需要var temp=context.getActions()将 *** 作数组保存下来，才可重复用于wx.drawcanvas；

6.注意

wx.drawCanvas({canvasId: 'target',actions: context.getActions()})

默认会清空备滚画布，想不清空需要

wx.drawCanvas({ canvasId: 'target', actions: context.getActions(), reserve:true})

7.《重点》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}pxheight:{{height}}px'></canvas>

注意，disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动，catchtouchmove是不行的

上面的写法，ccvsMove和cvsMove会都触发，

ccvsMove返回的是普通touch事件对象，有pageX,clientX等，

cvsMove返回的是canvasTouch事件对象，没燃滚磨有pageX,clientX,只有x,y

8.

wx.drawCanvas({ canvasId: 'target', actions: [], reserve:false})

可以清空画布和画布的状态

9.画布的scale tranlate rotate等状态，在reserve:true时会接着上次的状态

10. context.getActions()返回的数组很有用，打印出来你会发现里面的内容你都能看懂，可以直接修改数组改变画的动作

11.wx.drawCanvas时context.drawImage在手机上可以画出来，在电脑开发工具上画不出来

12.wx.canvasToTempFilePath

官方文档中只有一行，原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；wx.canvasToTempFilePath({ canvasId: 'target', success: function success(res) { wx.saveFile({ tempFilePath: res.tempFilePath, success: function success(res) {console.log('saved::' + res.savedFilePath) }, complete: function fail(e) {console.log(e.errMsg) } })}, complete: function complete(e) { console.log(e.errMsg)}})

区别一：

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方盯贺便的绑定事件或用来修改。canvas输出的是一整幅画布；

区凯歼派别二：

svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出改宏标量画布，就像一张图片一样，放大会失真或者锯齿。

---