今天将和大家分享的是有关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>
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/neqyMb.jpg?x-oss-process=style/syzhong)
可以看出图片放大时边框周围有锯齿
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>
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/iU7Vji.jpg?x-oss-process=style/syzhong)
可以看出SVG画出的图形放大不会失真。
总结:以上就是本篇文章的全部内容了,希望通过本篇文章使大家对canvas和SVG的区别有一定的了解。
以上就是HTML5中canvas与SVG有什么区别的详细内容,更多请关注爱上源码网其它相关文章!
微信
分享
相关标签:canvas,SVG
本文原创发布爱上源码网,转载请注明出处,感谢您的尊重!
- 上一篇:html如何创建电子邮件链接
- 下一篇:HTML如何实现文字的滚动效果
相关文章
相关视频
- js+canvas简单绘制圆圈的方法_javasc...
- html5+svg学习指南之SVG基础知识_htm...
- canvas与svg的区别有什么?canvas和s...
- HTML5中canvas与SVG有什么区别
本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~ |