createPattern 当图片比canvas大

来源:1-1 继续Canvas绘图之旅

灰灰灰灰灰灰灰

2018-01-11 16:46

使用createPattern方法的时候,图片大小比canvas大,怎么自动缩放?就让图片百分百在canvas里面显示?

写回答 关注

1回答

  • 挛毛
    2018-01-22 16:20:06

    图片比canvas的宽高大的时候可以创建一个新的canvas来把图片画上去,然后再将该canvas作为createPattern的图片放上去,代码如下:

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    canvas.width = 800;

    canvas.height = 800;

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

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

    into.width = 50;

    into.height = 50;

    var img = new Image();

    img.src = '1.jpg';

    img.onload = function() {

        ctx2.drawImage(img,0,0,50,50);

        var pattern = ctx.createPattern(into, 'no-repeat');

        ctx.fillStyle = pattern;

        ctx.fillRect(0, 0, 800, 800);

    }



    性别男爱好女

    何必呀,那不如直接加大第一个就好了。。。。

    2018-04-20 17:23:10

    共 1 条回复 >

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题