1.图案样式pattern

createPattern(image, type)
该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

注意: 用 canvas 对象作为 Image 参数在 Firefox 1.5 (Gecko 1.8) 中是无效的。
图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。

var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img,'repeat');

注意：与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 创建新 image 对象，用作图案
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function() {

    // 创建图案
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);

  }
}

创建一个canvas元素来

createPattern() 缺点
有的时候，我们在用createPattern() 方法在canvas里面填充图形的时候，canvas路径的大小，可能会和图片的大小不一样的情况，有的时候我们想要的效果是图片完全填充:

针对这个问题，可以创建一个临时的canvas，用canvas 的drawImg()方法，对图片进行缩放，然后在再吧canvas 传到createPattern里面。以此达到createPattern缩放的效果。

<canvas id="canvas" width="600" height="600" style="background-color: #7e8c8d"></canvas>
<script>
  var context = document.querySelector('#canvas').getContext('2d');
  context.rect(0,0,400,400);
  context.strokeStyle = "#000";
  context.stroke();
  var temp = document.createElement('canvas');
  var contextTemp = temp.getContext('2d');
  contextTemp.width = 150;
  contextTemp.height = 200;
  var img = new Image();
  img.src = './1.jpg';
  img.onload = function() {
    contextTemp.drawImage(this,0,0,150,200);
    var pattern = context.createPattern(temp,'no-repeat');
    context.fillStyle = pattern;
    context.fill();
  }
</script>