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