1. 填充圖案

createPattern() 方法在指定的方向內重複指定的元素。元素可以是圖片、視訊，或者其他 <canvas> 元素。

（1）圖片

createPatter（image, "repeat | repeat-x | repeat-y | no-repeat") 該方法要結合：fillStyle()和fillRect()方法一起使用

只能從圖片左上角開始獲取圖片，不能對圖片大小和位置進行調整。調整的是：圖片在canvas中的位置。

   <canvas width="200" height="200" id="canvas1"></canvas>
    <script>
        var oCanvas = document.getElementById('canvas1'); //獲取canvas
        var ctx = oCanvas.getContext('2d'); //獲取canvas的上下文
        var oImg = new Image();
        oImg.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3266320382,1596044228&fm=200&gp=0.jpg';
        oImg.onload = function(){
            ctx.fillStyle = ctx.createPattern(oImg, 'no-repeat');          
            ctx.fillRect(10,10, 200, 200);
        }
    </script>
 

（2）填充視訊

待完善。。。

（3）填充canvas

注意：在畫布2裡填充canvas1