HTML5中createPattern()

定義和用法

createPattern() 方法在指定的方向内重複指定的元素。

元素可以是圖檔、視訊，或者其他 <canvas> 元素。

被重複的元素可用于繪制/填充矩形、圓形或線條等等。

JavaScript 文法：

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

參數值

參數	描述
image	規定要使用的圖檔、畫布或視訊元素。
repeat	預設。該模式在水準和垂直方向重複。
repeat-x	該模式隻在水準方向重複。
repeat-y	該模式隻在垂直方向重複。
no-repeat	該模式隻顯示一次（不重複）。

var c = document.getElementById('myCanvas');
        var ctx = c.getContext("2d");//擷取上下文2d環境

        var img = new Image();
        img.src = "lamp.gif";
        img.onload = function(){//等到圖檔加載進來之後
            var pat = ctx.createPattern(img,"repeat");
            ctx.fillStyle=pat;
            ctx.fillRect(10,10,200,200);
        }