canvas实现平铺

代码：

 1 /**
 2  * Created by Administrator on 2016/1/30.
 3  */
 4 function draw(id){
 5     var canvas = document.getElementById(id);
 6     var context = canvas.getContext('2d');
 7     var img = new Image();
 8     img.src = "图像/1234.gif";
 9     img.onload = function (){
10         var ptrn = context.createPattern(img,'no-repeat');
11         context.fillStyle = ptrn;
12         context.fillRect(0,0,300,200);
13     }
14 }

View Code

用到的方法为createPattern()方法。

　　格式：

　　　　　createPattern（image,repetitionStyle）:

　　　　　　　　 image:图像。

　　　　　　　　repetitionStyle:平铺方式。有4个值,

　　　　　　　　　　　　　　　　repeat：在各个方向上平铺,

　　　　　　　　　　　　　　　　no-repeat：只使用一次,

　　　　　　　　　　　　　　　　repeat-x：在x轴上平铺,

　　　　　　　　　　　　　　　　repeat-y：在y轴上平铺。