canvas設置repeat

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