canvas画布与svg的区别

关键词：

CANVAS是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。

CANVAS

• 　　Canvas 是通过 JavaScript 来绘制 2D 图形。
• 　　Canvas 是逐像素进行渲染的。
•        在Canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。

SVG

•        Svg 是使用 XML 描述的 2D 图形。
•        Svg 是基于 XML 的，这也就是说 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。
•        在 SVG 中，每个被绘制过的图形均视为对象，如果 SVG 对象的属性发生变化，那么浏览器可以自行重现图形。

     比较

Canvas

1. 依赖分辨率
2. 不支持事件处理器
3. 文本渲染力弱
4. 能够以 .png 或 .jpg 的格式保存结果图形
5. 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘

SVG

1. 不依赖分辨率
2. 支持事件处理器
3. 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
4. 不适合游戏的应用
5. 复杂度高会减慢渲染的速度
6. 以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签

 从功能上来说

CANVAS可以看做是一个画布。，其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，所以就很适合来做地图。

从操作上来说

我们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover=function()。而svg支持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。

 

canvas与svg的区别

canvas是画布。位图不要在style中给canvas设置宽高。会有位移差varc=document.getElementById("c1");//给c设置一个绘图环境，得到的是一个对象varcan=c.getContext("2d");svg　　svg是矢量图svg绘制矢量图canvas用于绘制位图svg使用xml格式绘制图形svg要... 查看详情

canvas与svg的区别有什么？canvas和svg的区别比较

...是什么？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。知道了svg和canvas是什么之后，我们就来比较一下canvas和svg... 查看详情

总结：canvas与svg的区别(代码片段)

canvas(画布位图)　　1.最好不要在style中给canvas设置宽高，会有位移差　　2.canvas样式：　　.　　绘制矩形：　　　　fillRect() 绘制一个填充的方块，默认颜色是黑色　　　　strokeRect()绘制带边框的方块　　绘制线条　　　　mo... 查看详情

canvas和svg的区别

...是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。什么是SVG？SVG是一种使用XML描述2D图形的语言。SVG基于XML... 查看详情

html中svg和canvas的区别

...，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；区别二：svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。参考技... 查看详情

canvas和svg有什么区别？

...中感觉canvas和svg很相似，但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于canvas与svg的区别。一起来看一看吧。 在说canvas与svg的区别之前，我们先来看一看canvas和svg是什么... 查看详情

canvas与svg的区别

Canvas1.canvas通过javascript来绘制2D图形。2.canvas是逐个像素进行渲染。3.在canvas中，图形绘制完成后，它就不会继续得到浏览器的关注。如果位置、大小等发生变化，那么整个canvas场景也需要重新绘制，根据变化不同，会产生一定程... 查看详情

动画 SVG 还是画布？

】动画SVG还是画布？【英文标题】：AnimationSVGorCanvas?【发布时间】：2012-03-2804:12:17【问题描述】：我想知道在画布或svg中制作像this这样的动画（性能方面）是否更好？我现在在jquery中重写它，但我在某处读到画布每次更改时都... 查看详情

svg与canvas的区别

内联SVG 什么是SVG指可伸缩矢量图形定义用于网格的基于矢量的图形使用XML格式定义图形是万维网联盟的标准SVG的优势可通过文本编辑器来创建和修改SVG图像可以被搜索、索引、脚本话和压缩可伸缩在任何分辨率下被高质量的... 查看详情

canvas与svg区别

HTML5新特性之五——SVG绘图 Canvas绘图SVG绘图绘图类型位图矢量图缩放失真不失真颜色细节丰富不够丰富应用领域照片、游戏统计图、图标、地图内容JS绘制每个图形都是标签事件绑定不方便方便 ScalableVectorGraphiph，可缩放... 查看详情

canvas与svg的比较

...什么：什么是Canvas？ Canvas是指定了长度和宽度的矩形画布，可使用HTML5JSAPI来画出各种图形。不过，canvas本身并没有绘制能力（它仅仅是图形的容器）-您必须使用脚本来完成实际的绘图任务画布是一个矩形区域，您可以控制... 查看详情

h5_canvas与svg(代码片段)

...制工作必须在JavaScript内部完成。它会在网页中绘制一个画布，画布是一个矩形区域，你可以控制到画布的每一个像素，绘制各种图像。它提供多种绘制路径、矩形、圆形、字符以及添加图像的方法。　　2.Canvas的用法:　　1) ... 查看详情

画布上的模糊 svg

】画布上的模糊svg【英文标题】：Blurrysvgincanvas【发布时间】：2016-10-2922:22:51【问题描述】：为什么SVG在画布中不能正确缩放（全是像素化和模糊的）？我做错了什么？我想要的只是SVG图像，以保持它的纵横比与画布大小无关，... 查看详情

svg

...，png这类格式的图片，大量的大型网络游戏也是用的canvas画布绘制，以及统计图表等；但SVG则不依赖于分辨率，放大后也不 查看详情

svg与html5的canvas各有啥优点，哪个更有前途

...其实本质控制的是渲染，不管里面如何复杂，每一次改变画布都需要重新渲染，而svg不需要，所以两者就很能凸显各自用途，比如canvas的渲染特效不需要复杂的层叠运算，只需要输出最终的渲染结果，所以效率好，而svg只是用于... 查看详情

3.canvas与svg的区别(代码片段)

canvas是通过javascript来绘制的2D图形canvas是控制像素来渲染的一旦渲染完成，浏览器就不会关注了，如果位置发生变化，整个场景就需要重新绘制 <canvasid="mycanvas"width="500"height="300"></canvas><scripttype="text/javascript">varc... 查看详情

canvas和svg小记

...时候，canvas会初始化宽度为300像素和高度为150像素。　　画布的高宽 html属性设置widthheight时只影响画布本身不影画布内容,即 <canvaswidth=""height=""><canvas>　　css属性设置widthheight时不但会影响画布本身的高宽， ... 查看详情

html5新增元素中canvas与内联svg的比较！

SVG与Canvas的区别与比较如下：　　　svg：使用xml描述2D图形，canvas使用javascript描述2D图形。　　　Canvas是逐像素进行渲染的,在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景... 查看详情