createPattern() 自定義寬高

1、 createPattern()  方法簡介

　　createPattern() 方法在指定的方向內重復指定的元素。元素可以是圖片、視頻，或者其他 <canvas> 元素。被重復的元素可用於繪制/填充矩形、圓形或線條等等。

　　（來自w3c school ：鏈接：http://www.w3school.com.cn/tags/canvas_createpattern.asp ）

2、 createPattern()   缺點

　　有的時候，我們在用createPattern() 方法在canvas里面填充圖形的時候，canvas路徑的大小，可能會和圖片的大小不一樣的情況，有的時候我們想要的效果是圖片完全填充:

　　如圖所示：紅色是canvas邊框，灰色是繪制的矩形路徑。

       

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d') canvas.width = 400; canvas.height = 300; ctx.rect(0,0,150,200); ctx.strokeStyle = '#000' ctx.lineWidth = 1 ctx.stroke() var img = new Image(); img.src = './images/cyx.jpg'; img.onload = function(){ var ptn = ctx.createPattern(img,'no-repeat') ctx.fillStyle = ptn; ctx.fill(); }

3、解決方案

　　針對這個問題，可以創建一個臨時的canvas，用canvas 的drawImg()方法，對圖片進行縮放，然后在再吧canvas 傳到createPattern里面。以此達到createPattern縮放的效果。

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d') canvas.width = 400; canvas.height = 300; ctx.rect(0,0,150,200); ctx.strokeStyle = '#000' ctx.lineWidth = 1 ctx.stroke() var img = new Image(); img.src = './images/cyx.jpg'; img.onload = function(){ var canvasTemp = document.createElement('canvas'); var contextTemp = canvasTemp.getContext('2d'); canvasTemp.width = 150; // 目標寬度
    canvasTemp.height = 200; // 目標高度
    contextTemp.drawImage(this,0,0,150,200) var ptn = ctx.createPattern(canvasTemp,'no-repeat') ctx.fillStyle = ptn; ctx.fill(); }