canvas对象表示一个HTML画布元素<canvas>，此对象没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。用户可以直接在<canvas>对象上指定宽度和高度，但是其大多数功能都可以通过CanvasRenderingContext2D对象来获得。这是通过<canvas>对象的getContext（）方法并且把直接量字符串“2D”作为唯一的参数传递给它而获得的。
1.canvas对象的属性
在对象<canvas>中有如下两个重要属性。
（1）height属性
属性“height”表示画布的高度。和一幅图像一样，通过此属性可以指定为一个整数像素值或者是窗口高度的百分比。当改变这个值的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是“300”。
（2）width属性
属性“width”表示画布的宽度。和一幅图像一样，此属性可以指定为一个整数像素值或者是窗口宽度的百分比。当改变这个值的时候，在该画布上会擦除掉已经完成的所有绘图。默认值是“300”。
2.canvas对象的方法
对象<canvas>只有一个方法：getContext（），此方法用于返回一个用于在画布上绘图的环境。使用方法getContext（）的语法格式如下。
(www.xing528.com)
参数contextID指定了想要在画布上绘制的类型。当前唯一的合法值是“2D”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。很可能在不久的将来，<canvas>标签会扩展到支持3D绘图，此时用getContext（）方法就可以允许传递一个“3D”字符串参数。
方法getContext（）的返回值是一个CanvasRenderingContext2D对象，使用它可以绘制到<canvas>元素中。由此可见，方法getContext（）的功能是返回一个用来绘制的环境类型的环境，其本意是要为不同的绘制类型（2维、3维）提供不同的环境。
下面通过一个实例讲解显示矩形中的某个鼠标坐标的方法。
本实例的功能是在网页中绘制一个矩形，当用户将鼠标放在矩形内的某一个位置时，会显示鼠标的坐标。实例文件1.html的具体代码如下。
执行之后的效果如图6-1所示。
图6-1 执行效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
