解决canvas得createPattern绘制图片显示不全得问题

580 阅读1分钟

今天用canvas得createPattern赋值图片背景得时候发现 当我的图片大小大于canvas得画布大小的时候 无法自适应!效果如下:

image.png 为了解决这个问题我们需要做如下操作:

 ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = newHeight,
    
// 创建离屏画布
   var autoImg = document.createElement("canvas");

 var ctx3 = autoImg.getContext('2d');

 ctx3.canvas.width = canvas.width;

 ctx3.canvas.height = canvas.height;


  var img = new Image();
  img.src = imgsrc;
img.onload = function() {
     
      ctx3.drawImage(img,0,0,canvas.width,canvas.height);
       var pattern = ctx.createPattern(autoImg, 'no-repeat');
        ctx.fillStyle= pattern;
        ctx.fillRect(0,0, canvas.width, canvas.height);
    }

image.png 这样已经解决了