文档介绍：Html5 Canvas 初探学(1)- 画一个矩形 canvas 元素是 Html5 相对于之前的 Html 的一个新增特性, 本部分的博客文章就将研究这个组件的应用,尤其是在网页游戏开发上的应用。 canvas 组件和之前的 table 和 div 等组件类似, 都是不需要任何外部插件就可以运行的。只需使用 html 并且使用 2D 渲染上下文 API ( 2Drender context API )类似于我们 j2me 开发中的 Grapics 和 android 中的 canvas 画笔,只要得到这个上下文就可以调用它自带的方法来绘制。我们可以通过如下的方法定义一个 canvas : <canvas id="canvas" width="400" height="400"> </canvas> Canva s 的是作为2D 渲染上下文的一个包装器,2D 渲染上下文是基于 canva s 画布的“画笔”。它采用平面的笛卡尔坐标系统,左上角为原点( 0,0 )。向右移动, x 的坐标值会增加,向下移动时, y 值会增加,这点很像我们的 j2me 的画布。好了,在介绍了一些基本概念以后,我将构建第一个 Html5 Canvas ,首先效果图如下很简单的一个例子,就是画一个矩形,下面来看代码: 其中 canvas 的标签处就是定义一个 canvas 画布,但是并没有作任何的处理,标签 script 的部分是 js 的代码部分,其中如下的部分是获得渲染上下文: var canvas = ('canvas'); var context = ('2d'); 首先获得 canvas 元素,然后获得 2d 渲染得上下文。如下的代码是画矩形部分: = '#000000'; (50, 50, 100, 100); 首先设置颜色,然后画,四个参数分别是起点的横纵坐标和宽高如有错误,希望大家多多指正下一篇继续研究 2D 渲染上下文 API