canvas教程

Web Chart入门(1) Web端图形绘制SVG,VML, HTML5 Canvas技术比较

字号+ 作者:H5之家 来源:H5之家 2017-04-05 15:03 我要评论( )

先介绍一下矢量图的概念: 矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。例如

先介绍一下矢量图的概念:

矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓,由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。

SVG,VML, HTML5 Canvas  这三个技术绘制的都是矢量图。 只是由不同的厂商开发出来的。 要达成的效果基本是一样的。

1. VML

全称Vector Markup Language(矢量可标记语言)。 是微软1999年9月附带IE5.0发布的。

浏览器支持:

Internet Explorer 5++  -- Internet Explorer 8

IE9 以后就支持SVG了。

IE10  就已经把VML作为过时的技术来看待了。

 

(v=vs.85).aspx

2. SVG

全称Scalable Vector Graphics(可缩放矢量图形), 是基于xml,用于描述二维矢量图形的一种图形格式。

在 2003 年一月,SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。

浏览器支持:

  Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

3.  HTML5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

总结

所以在要在 browser 显示图形, 对于不同的浏览器使用的技术不同。

使用VML绘制图形, 速度是比较慢的。 基本上50个节点加上一些关联页面就会比较钝了。

VML会逐渐的退出。 但是目前IE8 及以下版本的IE浏览器的使用量还是很高。所以必须要兼顾。

HTML5 的标准尚未完全制定, 前途如何尚不可知。浏览器的支持方面也有一些问题。

目前来看,SVG看上去是主流。

不过针对图形绘制方面, 已有很多js library 可以使用, 这些  library已经处理了各浏览器的兼容问题。解决办法就是对于不同的浏览器及版本使用不同的技术绘制。只是对于我们之间使用这些library 来说, 就不再需要关注浏览器兼容的问题了。

 

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

相关文章
  • Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

    Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

    2017-04-04 17:01

  • Canvas画图-鼠标移动图形

    Canvas画图-鼠标移动图形

    2017-04-04 09:08

  • 程序开发小技巧:Delphi中的图形显示技巧

    程序开发小技巧:Delphi中的图形显示技巧

    2017-04-03 18:02

  • Delphi XE2 之FireMonkey入门学习笔记下载

    Delphi XE2 之FireMonkey入门学习笔记下载

    2017-04-01 14:06

网友点评
s