JS Canvas - 如何使用位图填充区域？

Question

使用JavaScript的画布 - 如何使用位图填充特定区域？而不只是绘制位图，但是例如用20x20 px位图填充100x100矩形？

graphics.beginBitmapFill(bmd, matr);
graphics.draw()

这是ActionScript3代码，我知道如何使用。我正在寻找替代它的JavaScript。

Answer 1

根据链接http://www.w3schools.com/tags/canvas_drawimage.asp，您可以按以下步骤操作：

• 假设您的html中有100px x 100px画布：

  <canvas id="cv"></canvas>
  

• 您可以使用JavaScript处理它，如下所示：

  var canvas, context;
  
  canvas = document.getElementById('cv');
  context = canvas.getContext('2d');
  

• 您可以将左上角的20x20图像放置在左侧10px处，将30px放置到顶部，如下所示

  context.drawImage('img.jpg', 10, 30, 20, 20);
  

我的第一个开源JavaScript库完全基于HTML5画布，您可以在其中看到有关如何在JS中使用它的更多示例： http://pickled-plugins.github.io/ripsaw-demo/#pages/home

Answer 2

也许这会有所帮助

context.fillStyle = context.createPattern(image, "repeat");
context.fillRect(0, 0, 300, 300);

完整代码 http://www.williammalone.com/briefs/how-to-fill-pattern-html5-canvas/