挽救（saving的简写）

SVG是一种使用可扩展标记语言描述2D图形的语言。它基于XML，这意味着我们可以将JavaScript事件处理程序附加到某些元素上。如果SVG对象的属性发生变化，浏览器可以自动再现图形。

帆布

画布通过JavaScript绘制2D图形。它是逐像素渲染的。一旦图形被绘制，如果它的位置改变，整个场景需要重新绘制，包括任何物体或被覆盖的物体

SVG和画布的区别

(1)SVG是一种用XML描述2D图形的语言，canvas用JavaScript动态描述2D图形

(2)SVG可以支持事件处理程序，但是canvas不支持

(3)当3)SVG中的属性发生变化时，浏览器可以重新渲染，适合矢量图形，而canvas不能，更适合视频游戏等。

(4)canvas可以很好的绘制像素，将结果保存为png或gif，作为API容器。

(5)画布取决于分辨率。SVG独立于分辨率。

(6)SVG的文本渲染比较好，Canvas渲染不好。SVG在渲染上可能比Canvas慢，尤其是应用了大量DOM的时候。

(7) Canvas更适合渲染较小的区域。SVG渲染更好和更大的区域。

SVG与画布的比较

SVG画布

开口的

不可扩展

支持DOM和事件。没有事件支持

分辨率无关的分辨率依赖性

渲染复杂区域时速度可能会较慢，这不适用于大型或复杂区域

渲染更好更大的区域(除了DOM)，渲染更小的区域

更好的矢量图形更适合动画(视频)和图像

不适合API。适用于原料药

很好地呈现文本不能很好地呈现文本

个案分析

画布画一个圆

canvasid='圆形'/画布

scripttype='text/javascript '

var circle=document . GetElementbyID(' circle ')；

var yuan=circle . GetContext(' 2d ')；

yuan . BeginPath()；

yuan.strokeStyle='粉色'；

元. arc(50，50，50，0，数学。PI*2，真)；

yuan . stroke()；

/script

本文转载自中文网站