<canvas>是Html5中一个全新的元素,它可以被javascript语言用来绘制图形。
最先<canvas>是在苹果公司的Mac OS X Dashboard上被引入,他被应用于Safari,而后基于Gecko1.8的浏览器,也支持这个新的元素,例如Firefox浏览器。如今,<canvas>元素已是HTML5标准规范的一部分。
<canvas>能做什么,我们都将通过本教程向大家讲解,并且可以作为你应用<canvas>的起点。
学习<canvas>元素只需要具有HTML和JavaScript的基础知识,测试环境需要Firefox浏览器,Safari最新版或者Opera9+。
如何定义<canvas>元素
<canvas id="tutorial" width="150" height="150"></canvas>
<canvas>元素只有两个属性Width和Height,这些属性都是可选的,并且可以使用DOM或css来控制。如果不设置width和height,则使用默认的宽300像素,高150像素。虽然可以通过css来控制和调整<canvas>的大小,但是渲染图像会进行缩放来适应布局,一旦发现渲染结果看上去变形,不必非要依赖css,你可以通过在<canvas>中显示的指定width和height的值。就像标准的HTML标签一样,也可以定义id属性,这样可以使得脚本应用更加方便。<canvas>元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。
因为该元素相对较新,并不是所有的浏览器都支持该元素,所我们要为那些不能正常浏览的提供替用的显示信息,它可以使用文本也可以使用图片:
在Apple Safari里,<canvas>的实现跟<img>很相似,它没有结束标签。然而,为了使<canvas> 能在web的世界里广泛适用,需要给替用内容提供一个容身之所,因此,在Mozilla的实现里结束标签(</canvas>)是必须的。如果没有替用内容,<canvas id="foo" ...></canvas> 对Safari 和Mozilla 是完全兼容的——Safari 会简单地忽略结束标签。如果有替用内容,那么可以用一些CSS 技巧来为并且仅为Safari 隐藏替用内容,因为那些替用内容是需要在IE 里显示但不需要在Safari 里显示。
<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文,通过它们可以来控制要显示的内容。我们专注于2D 渲染上,这也是目前唯一的选择,可能在将来会添加基于OpenGL ES 的3D渲染。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
我们来讲解下上面的代码,<canvas> 初始化是空白的,要使用脚本画图首先需要渲染上下文(rendering context),它可以通过canvas元素对象的getContext方法来获取,同时得到的还有一些画图需要调用的函数。getContext() 接受一个用于描述其类型的值作为参数。上面第一行通过getElementById 方法取得canvas 对象的DOM 节点。然后通过其getContext 方法取得其画图操作上下文。并且我们还可以使用脚本的方式判断浏览器对<canvas>的支持,即判断getContext是否存在。
保存以上代码,在浏览器中运行,效果图如示:
下一节,我们将学习 HTML5 canvas 元素教程(2)绘制图形 。