1. 程式人生 > >canvas設置repeat

canvas設置repeat

element function etc reat 技術分享 nload bubuko rec const

canvas設置repeat

  1. 方法

    ctx.createPattern(img, ‘repeat‘); 
    
    repeat
    repeat-x
    repeat-y
    no-repeat
  2. 重復圖片

    技術分享圖片

    const canvas = document.getElementById(‘canvas‘);
    const ctx = canvas.getContext(‘2d‘);
    
    var img = new Image();
    img.src = ‘http://thyrsi.com/t6/668/1549693913x2890173891.png‘;
    img.onload = function() {
        var ptrn = ctx.createPattern(img, ‘repeat‘);
        ctx.fillStyle = ptrn;
        ctx.fillRect(0, 0, 900, 700);
    }

canvas設置repeat