关于canvas中的repeat

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
<title>JavaScript之Canvas</title>
  </head>
  <body>

    <canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>
    <img src="1.jpg" width=200 height=200 alt="图片">
  
  <script>
      
      var canvas = document.getElementById("canvas");
          //检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
          if (canvas.getContext) {
      var context = canvas.getContext("2d");               var img = document.images[0];
              var pattern = context.createPattern(img, "repeat");
              context.fillStyle = pattern;
              context.fillRect(0, 0, 200, 200);
              
 }
  
  </script>
  </body>
</html>代码如上，想要的效果是重复显示，为何出来的效果是黑色填充了矩形，而不是重复显示图像？求老司机。

解决方案 »

  1.   

    必须要等图片加载完成才能在 canvas中使用var canvas = document.getElementById("canvas");
    //检测浏览器是否支持canvas 该方法是否存在 取得上下文对象
    if (canvas.getContext) {
    var context = canvas.getContext("2d"); 
    var img = document.images[0];
    img.onload = function () {
        var pattern = context.createPattern(img, "repeat");
        context.fillStyle = pattern;
            context.fillRect(0, 0, 200, 200);
    }
    }