1、背景填充，有点难理解

  1. <style>
  2.     canvas {
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.     var canvas = document.getElementById("can");
  13.     var ctx = canvas.getContext("2d");
  14.     var img = new Image();
  15.     img.src = "./good.png"; // 异步加载，经常会导致加载不完就载入了，所以用onload
  17.     img.onload = function (){
  18.     ctx.beginPath();
  19.     ctx.createPattern(img,"no-repeat");// 以坐标系原点做填充
  20.     ctx.fillStyle = "blue";
  21.     ctx.fillRect(100,100,200,100);
  23.     /*以坐标系原点做填充：解决方案：
  24.     ctx.translate(100,100);
  25.     ctx.fillRect(0,0,200,100);*/
  26.     }
  28. </script>
  29. </body>