Javascript 如何使HTML5画布上的图像垂直和水平重复？

我正在HTML5画布上绘制世界地图。我需要世界地图垂直和水平重复。我动态地将世界地图作为img标记附加到我的web应用程序上的div，并将其spring以显示世界的不同部分（取决于脚本中其他地方传递的数据）。例如，如果亚洲占据了div的左半部分，并且说，不是美洲，那么我不希望右边出现空白。我想让地图开始重复。所以我需要在画布上绘制的图像来重复

我在stackoverflow的其他地方找到了这个，但它对我不起作用。D:

createFullMapImage: function(done){
var imageObj = new Image();

imageObj.onload = _.bind(function(){
   var canvas = document.createElement("canvas"),
       context = canvas.getContext('2d'),
       w = imageObj.width,
       h = imageObj.height;

   canvas.width = w;
   canvas.height = h;

   for(var w = 0; w < canvas.width; w += imageObj.width){
      for(var h = 0; h < canvas.height; h += imageObj.height){
          context.drawImage(imageObj, w, h);
      }
   }
   var canvasImage = canvas.toDataURL('image/png');
   done.call(this, canvasImage);
}, this);
imageObj.src = [src]
}

createFullMapImage:函数（完成）{
var imageObj=新图像（）；
imageObj.onload=u2;.bind（函数（）{
var canvas=document.createElement（“画布”），
context=canvas.getContext（'2d'），
w=图像对象宽度，
h=图像对象高度；
画布宽度=w；
canvas.height=h；
对于（变量w=0；w

顺便说一句，我试着在世界地图的URL上设置一个带有背景图像属性的div，并设置背景重复，但由于某种原因，这会扭曲我想要的大小

Thx --加温

编辑--RE:复制。作为HTML5画布的新手，从同一主题的另一个线程中，我不清楚在画布上重复图像src时是否将.fillRect（）方法与.drawImage（）方法结合使用。这个问题的答案有助于澄清。

使用模式重复

// img is the image, ctx is the 2d context.
var pat=ctx.createPattern(img,"repeat");  // repeat the image as a pattern
ctx.fillStyle=pat;   // set the fill style
ctx.rect(0,0,150,100);  // create a rectangle
ctx.fill();            // fill it with the pattern.

---

使用

ctx.createPattern

重复位图图像。将

fillStyle

设置为图案，然后在要重复图像的区域上绘制一个矩形。。。。但我可能做错了。如何使用.createPattern（）方法修改上述代码？