HTML5 canvas平舖的程式碼詳解

最近在做個網站項目，用到很多canvas，有個需求是drawImage把圖片畫在canvas裡面，圖片比較小，需要平鋪效果，當背景圖。 PS（背景圖高寬10px，需要畫的畫布高寬200px）

#由於一開始是drawImage出來的，所以採用了方法one

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){
    var can = document.createElement("canvas");
    can.width = 10;
    can.height = 10;
    var ctx2 = can.getContext("2d");
    ctx2.drawImage(img,0,0,10,10,0,0,10,10);
    ctx.fillStyle = ctx.createPattern(can,"repeat");
    ctx.fillRect(0,0,200,200);
}

用到了背景圖的高寬度10，有點繁瑣，為什麼不一步到位呢？所以改成了這種方式

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){
    var pat = ctx.createPattern(img,"repeat");
    ctx.rect(0,0,200,200);
    ctx.fillStyle = pat;
    ctx.fill();
}

 

GOOD！
再來重申下createPattern定義

createPattern() 方法在指定的方向內重複指定的元素。
元素可以是圖片、影片，或是其他 5ba626b379994d53f7acf72a64f9b697 元素。
被重複的元素可用於繪製/填滿矩形、圓形或線條等等。

JavaScript 語法：

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

  參數 描述

#repeat	#預設。規定要使用的圖片、畫布或影片元素。
repeat-x	此模式只在水平方向重複。
repeat-y	此模式只在垂直方向重複。
no-repeat	此模式只顯示一次（不重複）。

以上是HTML5 canvas平舖的程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！