HTML5开发：多种方式平铺图像

在画布中不但可以对绘制的图像进行缩放绘制，还可以通过调用上下文环境对象中的createPattern（）方法关联图像元素。选择平铺方式创建一个平铺的对象，并将该平铺对象赋值给“fillStyle”属性。通过调用方法fillRect（）将该平铺对象绘制在画布中，从而实现平铺图像的效果。使用create Pattern（）方法的格式如下：

其中，“cxt”为上下文环境对象名称，参数“image”表示被平铺的图像，参数“type”表示图像平铺的方式，该参数有4种取值，具体说明如下。

■no-repeat：不平铺绘制的图像。

■repeat-x：按水平方向横向平铺所绘制的图像。

■repeat-y：按垂直方向纵向平铺所绘制的图像。

■repeat：全方位平铺所绘制的图像。

下面将通过一个实例讲解在页面中使用不同方式平铺指定的图像的方法。

(www.xing528.com)

在本实例的页面中新建了一个<canvas>元素，每次单击画布元素时都调用不同的平铺方式，将图像绘制显示在画布元素中。实例文件12.html的代码如下。

编写脚本文件js12.js，首先根据单击画布的累加总量“intNum”的值获取图像在画布中的平铺方式，并保存至变量“strPmType”中。使用方法clearRect（）清空每次在画布中绘制的图形，并定义一个“Image”对象，设置该对象加载图像的路径；再根据该图像与平铺方式变量“strPrnType”的值新建一个平铺对象。在加载图像的“onload”事件中，将“prn”平铺对象赋值给“fillStyle”属性，通过fillRect（）方法将平铺对象绘制在整个画布中，“cnv.width”与“cnv.height”值分别为画宽与高。文件js12.js的代码如下。

执行后的效果如图6-12所示。

图6-12 执行效果