Canvas圖案平鋪-10

html部分

     <img src="http://www.runoob.com/try/demo_source/img_lamp.jpg" alt="柴犬"
        title="開心一下" id="scream" width="30" height="30">
    <canvas id="canvas">
        沒有出現圖形，說明您的瀏覽器不支持 HTML5 canvas 標籤。
    </canvas>

js部分

    window.onload = function (params) {
            // 得到繪製源
            var c = document.getElementById('canvas');
            var img = document.getElementById('scream');
            // 創建畫布，建立二維視角
            var ctx = c.getContext('2d');
            // ctx.clearRect(0,0,c.width,c.height);
            // 平鋪重複 createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");注意：參數用雙引號
            var pat = ctx.createPattern(img,"repeat");
            ctx.rect(0, 0, 250, 680);
            ctx.fillStyle = pat;
            ctx.fill();
        }