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

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

来源:http://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画图教程(1)—画图的基本常识 02-19
HTML5 canvas 基本语法 02-19
HTML5 Canvas概述 02-19
html5 Canvas画图教程(5)—canvas里画曲线之arc方法 02-19
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法 02-19
html5 canvas-1.canvas介绍(hello canvas) 02-19
HTML5 Canvas 起步(2) - 路径 02-19

HTML5 Canvas标签使用收录

标签： Web开发

一、基本概念什么是Canvas canvas 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不...

HTML5 Canvas鼠标与键盘事件demo示例

标签： Web开发

演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成：代码如下： // mouse event ca...

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和圆有那...

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...

查看更多精彩>>

红叶小廖

经验教程

344

19930228520lzw

HTML5之SVG 2D入门7—SVG元素的重用与引用

嗨喽男人

HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析

h455559

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

精华推荐

热门标签