createPattern() 自定义宽高

1、 createPattern()  方法简介

  createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频,或者其他 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。

  (来自w3c school :链接:http://www.w3school.com.cn/tags/canvas_createpattern.asp )

2、 createPattern()   缺点

  有的时候,我们在用createPattern() 方法在canvas里面填充图形的时候,canvas路径的大小,可能会和图片的大小不一样的情况,有的时候我们想要的效果是图片完全填充:

  如图所示:红色是canvas边框,灰色是绘制的矩形路径。

createPattern() 自定义宽高_第1张图片

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缩放的效果。

createPattern() 自定义宽高_第2张图片

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

 

你可能感兴趣的