HTML5中canvas与SVG有什么区别-百分百源码网

HTML5中canvas与SVG有什么区别

发布时间：09/01 来源：未知浏览：关键词：

今天将和大家分享的是有关JavaScript中canvas与SVG的不同，有必然的参照作用，但愿对大家有所帮忙

【引荐课程：HTML5教程】

SVG

SVG 是一种使用 XML 描写 2D 图形的说话，它基于XML也就是我们可认为某个元素附加JavaScript事件处置器，假如SVG 对象的属性发生转变，那么阅读器能够主动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。它是逐像素停止渲染的，一旦图形被绘制完成，假如它的位置发生了转变，那么整个场景都需要从新绘制，包罗任何或者已经被覆盖的对象

SVG与canvas的不同

（1）SVG是用来描写XML中2D图形的说话，canvas借助JavaScript动态描画2D图形

（2）SVG可支撑事件处置程序而canvas不支撑

（3）SVG中属性改动时，阅读器可以从新显现它，适用于矢量图，而canvas不成以，更适合视频游戏等。

（4）canvas可以很好的绘制像素，用于留存结果为png或者gif,可做为API容器。

（5）canvas取决于辨论率。SVG与辨论率无关。

（6）SVG具有更好的文本渲染，而Canvas不克不及很好的渲染，渲染中的SVG大概比Canvas慢，特殊是利用了大量的DOM。

（7）画布更适合渲染较小的区域。SVG渲染更好的更大区域。

SVG与canvas之间的比力

SVG	canvas
可扩展	不成扩展
支撑DOM和事件	没有事件支撑
不依靠辨论率	辨论率依靠
在渲染复杂区域时大概会更慢	不适合较大或复杂的区域
显现更好更大的区域（DOM除外）	渲染更小的区域
更好的矢量图形	更适合动画（视频）和图像
不适合API	适合API
很好地显现文本	不克不及很好地显现文本

案例剖析

canvas绘制一个圆

<canvas id="circle"></canvas>

<script type="text/javascript">
	
	var circle=document.getElementById("circle");
	var yuan=circle.getContext("2d");
	yuan.beginPath();
	yuan.strokeStyle="pink";
	yuan.arc(50,50,50,0,Math.PI*2,true);
	 yuan.stroke();
</script>

Image 19.jpg

可以看出图片放大时边框四周有锯齿

SVG绘画一个圆

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1">
<circle cx="100" cy="50" r="40" stroke="pink"
stroke-width="2" fill="#fff"/>
</svg>

Image 20.jpg