摘要:
HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5。从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需。
历史:
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。canvas标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
浏览器:
从图中可以看出IE9+都支持canvas。
API:
使用前,首先需要新建一个canvas网页元素。如下:
1 2 您的浏览器版本太低,不支持canvas!3
如果浏览器不支持canvas标签,页面上就会显示‘您的浏览器版本太低,不支持canvas!’。每个canvas元素都有一个方法--getContext方法,返回一个用于在画布上绘图的环境。
1 var canvas = document.getElementById('myCanvas');2 canvas.getContext(contextID);
参数:
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
返回值:
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型(2 维、3 维)提供不同的环境。当前,唯一支持的是 "2d",它返回一个 CanvasRenderingContext2D 对象,该对象实现了一个画布所使用的大多数方法。
在画图之前先讲下坐标,每一个图的原点坐标(0,0)在图的左上角,x轴正方向水平向右,y轴正方向水平向下。
Demo:
1、线
1 2 您的浏览器不支持canvas!3
4