登录  /  注册

HTML5中canvas与SVG有什么区别

清浅
发布: 2018-11-27 17:24:08
原创
4360人浏览过

今天将和大家分享的是有关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

可以看出SVG画出的图形放大不会失真。

总结:以上就是本篇文章的全部内容了,希望通过本篇文章使大家对canvas和SVG的区别有一定的了解。

以上就是HTML5中canvas与SVG有什么区别的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号