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(); }

?

轉載于:https://www.cnblogs.com/lonecry/p/8203223.html

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的createPattern() 自定义宽高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。