HTML5 Canvas API

<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和一些复杂的)动画。<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

当我们在页面中添加一个<canvas>元素时,它就在页面中创建了一个矩形区域。这个矩形区域默认宽为300px高为150px,当然,我们也可以自定义它的宽和高并设置这个元素的属性。<canvas>看起来很像<img>,唯一不同就是它不含src和alt属性。下面演示添加在HTML页面中的<canvas>元素。


<canvas>元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式,canvas默认是全透明的。如果在页面上添加了<canvas>元素,我们就可以用JavaScript来控制它。

<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文(rendering context),我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上,这也是目前唯一的选择,可能在将来会添加基于OpenGL ES 的 3D 上下文。

先来看一下canvas的坐标
canvas中的坐标是从左上角的(0,0)位置开始的,也就是我们所说的原点,并横向x轴和纵向y轴(以像素)增加。如下图:

我们知道IE是不支持canvas的,我们只有两种选择,一是在canvas标签中添加升级浏览器的提示(这些内容在支持canvas的浏览器中是不可见的);

二是导入一段js让IE也使用canvas。我们可以使用谷歌的开源代码explorercanvas(http://code.google.com/p/explorercanvas),我们只需加个条件注释即可。

下面我们来画一条简单的对角线
在页面中添加以下代码

<canvas> 初始化是空白的,要在上面用脚本画图首先需要其渲染上下文(rendering context),它可以通过 canvas 元素对象的 getContext 方法来获取,同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。

最后添加监听方法addEventListener()或者在body标签中添加 onload=”drawDiagonal();”

提示:你可以先修改部分代码再运行。

2 Comments

  1. canvas还是能做很多有意思的东西的 IE9的大赛出了很多用CANVAS做的小游戏 还有很牛的圆桌武士

    回复回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注