canvas教程

HTML5之图形绘制技术(Canvas Vs SVG)

字号+ 作者:H5之家 来源:H5之家 2017-02-27 10:06 我要评论( )

HTML5中的2D图形绘制技术 Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.

HTML5中的2D图形绘制技术

Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新)

Canvas_Vs_SVG1

Canvas vs SVG

<canvas>和<svg>都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line ...),还有完整的动画,事件机制,本身就能独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,目前的稳定版本是1.1 - ,两者的主要特点见下面的表格:

Canvas_Vs_SVG2

SVG与Canvas主要特点

根据两者的不同特点,Canvas和SVG有各自的适用范围

Canvas适用场景

Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制

SVG适用场景

SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景

canvas_or_SVG

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 可生成指定图案的js二维码插件

    可生成指定图案的js二维码插件

    2017-02-26 18:00

  • HTML5 Canvas核心技术:图形、动画与游 HTML5 Canvas核心技术:图

    HTML5 Canvas核心技术:图形、动画与游 HTML5 Canvas核心技术:图

    2017-02-24 15:05

  • HTML5 Canvas雨滴下落动画DEMO演示2

    HTML5 Canvas雨滴下落动画DEMO演示2

    2017-02-24 13:03

  • canvas绘制的直线动画

    canvas绘制的直线动画

    2017-02-21 18:00

网友点评
o