HTML5中Canvas与SVG的画图原理比较

2016-02-19 11:16 46 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程，今天给大家分享HTML5中Canvas与SVG的画图原理比较教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发】

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很多的情况都会变慢）最适合许多对象频繁重画的图形游戏不适合游戏应用

来源:https://www.tulaoshi.com/n/20160219/1596926.html

上一篇： java 中文字符串数组按照音序排列
下一篇： Win8用户名微软ID和管理员账户详解

看过《HTML5中Canvas与SVG的画图原理比较》的人还看了以下文章更多>>

HTML5中Canvas与SVG的画图原理比较 02-19
html5 canvas 画图教程案例分析 02-19
html5 Canvas画图教程(9)—canvas中画出矩形和圆形 02-19
HTML5 canvas 基本语法 02-19
html5 Canvas画图教程(1)—画图的基本常识 02-19
HTML5 Canvas概述 02-19
html5 Canvas画图教程(5)—canvas里画曲线之arc方法 02-19
HTML5 Canvas鼠标与键盘事件demo示例 02-19
HTML5 Canvas 起步(2) - 路径 02-19
HTML5 Canvas标签使用收录 02-19

html5 canvas-1.canvas介绍(hello canvas)

标签： Web开发

从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的ap...

html5 canvas 使用示例

标签： Web开发

复制代码代码如下: !DOCTYPE HTML html head meta charset="UTF-8" titleHTML5示例/title style type="text/css" #container{border:1px solid #ccc;width:800px;height:600px;position:relative;} canvas{position:absolute;top:0px;left:0px;z-index:1;} /style /head body select id="tools" option value="pen"铅笔/option op...

html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法

标签： Web开发

前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画出S形的曲线了。 bezierCurveTo，也就是所谓的贝赛尔曲线了，如果你学过某些画图工具，就能马上理解。 bezierCurveTo的语法如下：...

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

标签： Web开发

继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：代码如下： ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点...

html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法

标签： Web开发

上一篇文章讲了canvas的arc方法，这一篇讲和他有关的arcTo方法。 arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那...

查看更多精彩>>