html5垂直线怎么画,如何使HTML5画布上的图像垂直和水平重复？

我正在将一幅世界地图绘制到HTML5画布上。我需要世界地图垂直和水平重复。我将世界地图作为img标签动态添加到我的Web应用程序中的div上，并将其显示为显示世界的不同部分(取决于在脚本中其他地方传递的数据)。例如，如果亚洲占据了左边的一半，而不是美洲，那么我不想在右边出现空白区域。我想让地图开始重复。所以我需要在画布上绘制的图像重复。如何使HTML5画布上的图像垂直和水平重复？

我发现这在其他地方的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]

}

P.S.我已经尝试用背景图像属性设置div来映射世界地图的URL，并设置background-repeat，但由于某种原因，这会扭曲我想要的大小。

THX --Gaweyne

编辑 - RE：重复。作为HTML5画布的新手，对于我来说，从同一主题上的其他线程不清楚，在画布上重复使用图像src时，是否将.fillRect()方法与.drawImage()方法结合使用。这个线程的回答者帮助澄清了。

2015-10-13

Gaweyne

+1

使用'ctx.createPattern'重复位图图像。将'fillStyle'设置为该图案，然后在想要重复图像的区域上绘制一个矩形。 –

+0

也试过... –

+0

...但我可能一直在做错了。你将如何修改上述代码，使用.createPattern()方法？ –