时间:2021-05-08
canvas 与 SVG都能够使你在浏览器中画图,但它们的基本原理不同。
SVG
SVG是一种在XML中描述二维图形的语言。
SVG是基于XML的,意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。
在SVG中,每一个图形被记作一个对象。如果一个SVG对象的属性发生改变,浏览器可以自动重新生成图形。
Canvas
Canvas能够在fly上画2D图形(使用JS)
Canvas能够按照像素重新生成。
在Canvas中,一旦图形完成,就会被浏览器忘记。如果图形位置要发生改变,那么整个屏幕需要重画,包括图形覆盖的对象。
Canvas 和SVG的比较
下表显示了canvas与SVG的主要不同点:
Canvas SVG 依赖分辨率 独立于分辨率 不支持事件处理器 支持事件处理器 弱文本渲染能力 最适合具有大渲染面积的应用(谷歌地图) 可以保存最终图片为PNG或者JPG 复杂图像,重画变慢(任何使用DOM很多的情况都会变慢) 最适合许多 对象频繁重画的图形游戏 不适合游戏应用
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下:varcanvas=document.getElementByI
今天要推荐的是9款非常有意思的HTML5动画,这些动画有些是基于Canvas的,有些是SVG结合HTML5实现的,让我们一起来看看。1、HTML5梦幻可给任意元
使用HTML5制作时钟复制代码代码如下:html5时钟varClock=function(canvas,options){this.canvas=canvas;
首先要说明的是这里不是用鼠标画画,而是在触摸设备上用手指,比如ipad。做画图板,自然使用html5的canvas来实现了。在canvas中我们可以画圆,画矩形
到目前为止,SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形。现在,我们就来比对一下这两种技术,分