码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-05-29 12:09:33      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:文档   绘制   元素   查看   根据   高保真   脚本   栅格图像   ice   

HTML5中的2D图形绘制技术

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

技术图片

Canvas vs SVG

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

技术图片

SVG与Canvas主要特点

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

Canvas适用场景

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

SVG适用场景

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

技术图片

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

标签:文档   绘制   元素   查看   根据   高保真   脚本   栅格图像   ice   

原文地址:https://www.cnblogs.com/homehtml/p/12986525.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!