createPattern(建立路徑樣式物件)

var pattern = createPattern(imageObject,repeat)

建立可重用模式(物件)。

該物件可以分配給任何 strokeStyle 和/或 fillStyle

然後 stroke() 或 fill()將使用物件的模式繪製 Path。

引數:

  • imageObject 是將用作圖案的影象。影象的來源可以是:

    • HTMLImageElement —一個 img 元素或一個新的 Image()
    • HTMLCanvasElement —一個 canvas 元素,
    • HTMLVideoElement —一個視訊元素(將抓取當前視訊幀)
    • ImageBitmap,
    • 斑點。
  • repeat 確定如何在畫布上重複 imageObject(很像 CSS 背景)。此引數必須是引號分隔的,有效值為:

    • 重複—圖案將水平和垂直填充畫布
    • “repeat-x”—圖案只會水平重複(1 個水平行)
    • “repeat-y”—圖案只會垂直重複(1 個垂直行)
    • 重複無—圖案只出現一次(在左上角)

模式物件是一個物件,你可以使用(並重複使用!)來使路徑筆劃和填充變得有圖案。

側注: 模式物件不是 Canvas 元素的內部物件,也不是 Context。它是一個獨立且可重用的 JavaScript 物件,你可以將其分配給你想要的任何路徑。你甚至可以使用此物件將模式應用於另一個 Canvas 元素上的 Path(!)

有關 Canvas 模式的重要提示!

建立模式物件時,整個畫布將無形地填充該模式(受 repeat 引數限制)。

當你通過一條路徑時,會發現隱形圖案,但只會在被撫摸或填充的路徑上顯示出來。

  1. 從你要用作圖案的影象開始。重要(!):在嘗試使用影象建立圖案之前,請確保影象已完全載入(使用 patternimage.onload)。

StackOverflow 文件

  1. 你建立這樣的模式:

     // create a pattern
     var pattern = ctx.createPattern(patternImage,'repeat');
     ctx.fillStyle=pattern;
    
  2. 然後 Canvas 將無形地看到你的模式建立如下:

StackOverflow 文件

  1. 但是直到你使用這個模式,你才能看到 Canvas 上的模式。

  2. 最後,如果使用模式描邊或填充路徑,隱形模式在畫布上變得可見…但僅限於繪製路徑的位置。

StackOverflow 文件

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // fill using a pattern
    var patternImage=new Image();
    // IMPORTANT! 
    // Always use .onload to be sure the image has
    //     fully loaded before using it in .createPattern
    patternImage.onload=function(){
        // create a pattern object
        var pattern = ctx.createPattern(patternImage,'repeat');
        // set the fillstyle to that pattern
        ctx.fillStyle=pattern;
        // fill a rectangle with the pattern
        ctx.fillRect(50,50,150,100);
        // demo only, stroke the rect for clarity
        ctx.strokeRect(50,50,150,100);
    }
    patternImage.src='http://i.stack.imgur.com/K9EZl.png';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=325 height=250></canvas>
</body>
</html>