Question

我正在将一张世界地图绘制到HTML5画布上。我需要世界地图垂直和水平重复。我将动态地将世界地图（作为img标记）附加到我的Web应用程序上的div，并将其spriting以显示世界的不同部分（取决于脚本中其他位置传递的数据）。例如，如果亚洲占据了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]
}

P.S。我已经尝试将具有background-image属性的div设置为世界地图的URL，并设置background-repeat，但由于某种原因，这会扭曲我想要的大小。

THX --Gaweyne

编辑 - RE：重复。作为HTML5画布的新手，我不清楚，从同一主题的另一个线程，我是否在使图像src重复时使用.fillRect（）方法和.drawImage（）方法画布。这个帖子的回答者帮助澄清了。

Answer 1

使用模式重复

// 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.

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

1 个答案: