1.算法平鋪
var scale = 5;
//縮小后的圖像寬度
var w1 = image.width/scale;
//縮小后的圖像高度
var h1 = image.height/scale;
//平鋪橫向個數
var hNums = canvas.width/w1;
//平鋪縱向個數
var vNums = canvas.height/h1;
for(var i=0;i<hNums;i++){
for(var j = 0;j<vNums;j++){
ctx.drawImage(image,i*w1,j*h1,w1,h1);
}
}
2.createPattern 平鋪
var myPattern = ctx.createPattern(img,'repeat');//type: no-repeat,repeat-x,repeat-y,repeat
ctx.fillStyle = myPattern;
ctx.fillRect(0,0,400,300);
var scale = 5;
//縮小后的圖像寬度
var w1 = image.width/scale;
//縮小后的圖像高度
var h1 = image.height/scale;
//平鋪橫向個數
var hNums = canvas.width/w1;
//平鋪縱向個數
var vNums = canvas.height/h1;
for(var i=0;i<hNums;i++){
for(var j = 0;j<vNums;j++){
ctx.drawImage(image,i*w1,j*h1,w1,h1);
}
}
2.createPattern 平鋪
var myPattern = ctx.createPattern(img,'repeat');//type: no-repeat,repeat-x,repeat-y,repeat
ctx.fillStyle = myPattern;
ctx.fillRect(0,0,400,300);