图形化绘制技术Canvas与SVG.doc_H5之家 - 中国HTML5教程资源分享第一站

文档介绍：
图形化绘制技术 Canvas 与 SVG Canvas 在 html 的应用<canvas> 标签定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。实例如何通过 canvas 元素来显示一个红色的矩形: <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> 大多数 Canvas 绘图 API 都没有定义在<canvas> 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。 Canvas API 也使用了路径的表示法。但是, 路径由一系列的方法调用来定义, 而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。一旦定义了路径,其他的方法,如 fill() ,都是对此路径操作。绘图环境的各种属性,比如 fillStyle ,说明了这些操作如何使用。 HTML 页面中的 SVG SVG 文件可通过以下标签嵌入 HTML 文档: <embed> 、<object> 或者<iframe> 。下面,你会看到三种把 SVG 文件嵌入 HTML 页面的不同方法。使用<embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本。注释:当在 HTML 页面中嵌入 SVG 时使用<embed> 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML ,就不能使用<embed> 。任何 HTML 规范中都没有<embed> 标签。语法: <embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="/viewer/install/" /> 注释: pluginspage 属性指向下载插件的 URL 。使用<object> 标签<object> 标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。注释:假如您安装了最新版本的 Adobe SVG Viewer ,那么当使用<object> 标签时 SVG 文件无法工作(至少不能在 IE 中工作)! 语法: <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="/viewer/install/" /> 注释: codebase 属性指向下载插件的 URL 。使用<iframe> 标签<iframe> 标签可工作在大部分的浏览器中。语法: <iframe src="rect.svg" width="300" height="100"> </iframe> 我期望.... 如果仅仅通过引用 SVG 的命名空间, 就能够把 SVG 元素之间添加到 HTML 代码中, 那就太棒了,这像这样: <html xmlns:svg="0/svg"> <body> <p>This is an HTML paragraph</p> <svg:svg width="300" height="100" version="1.1" > <svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg:svg> </body> </html> 在 svg 文件中嵌入 javascript 动态创建 svg <canvas> 标记和 SVG 之间的异同。 Canvas 和 SVG 都允许您在浏览器中创建图形, 任何一种都可以用另一种来模拟,可是,每一种都有强项和弱点。例如, SVG 绘图很容易编辑, 只要从其描述中移除或改变元素就行。要从同一图形的一个<canvas> 标记中移除元素, 往往需要擦掉绘图重新绘制它, 但是它们在根本上是不同的。 SVG 和 canvas 的不同和适用场景 SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于矢量的, 每个被绘制的图形均被视为对象, 这意味着 SVG DOM 中的每个元素都是可用的 SVG 绘图很容易编辑, 只需要增加或移除相应的元素就可以了。 SVG 更适合静态图片展示,高保真文档查看和打印的应用场景。 svg 可以为某个元素附加 JavaScript 事件处理器。 SVG 更适合用来做动态交互。不依赖分辨率最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 canvas 更适合动态渲染和大数据量绘制, 用来实现类似于 Flas h 能做的事情( 当然现在 Canvas 与 Flash 相比还有一些不够完善的地方)在 canvas 中,一旦图形被绘制完成, 它就不会继续得到浏览器的关注。如果其位置发生变化, 那么整个场景也需要擦掉重新绘制,包括任何或许已被图形覆盖的对象。不支持事件处理器( 只有 mousedown 、 mouseover 、 mouseup) 依赖分辨率弱的文本渲染能力能够以.png 或.jpg 格式保存结果图像最适合图像密集型的游戏,其中的许多对象会被频繁重绘

内容来自淘豆网转载请标明出处.