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

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

为了解决这个问题我们需要做如下操作：

// 创建初始画布

    let scienceDom = document.createElement( 'canvas' );

    scienceDom.width = 600;

    scienceDom.height = 300;

    let context = scienceDom.getContext("2d");

    // 创建离屏画布

    var autoImg = document.createElement("canvas");

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

    ctx2.canvas.width = 1024;

    ctx2.canvas.height = 576;

    /**

    *加载图片

    * */

    let backImage = new Image();

    backImage.src = "./images/science.jpg"

    backImage.onload = function () {

      ctx2.drawImage(backImage,0,0,600,300);

      var pattern = context.createPattern(autoImg, 'no-repeat');

      context.fillStyle = pattern;

      context.fillRect(0, 0, 600, 300);

    }

    document.body.appendChild( scienceDom );

代码图片

实际绘制效果

欧克 这样就解决了我们的问题拉 欢迎大家留言咨询

document.body.appendChild( scienceDom );