JavaScript Canvas createPattern

时间:2013-08-25 11:51:40

标签: javascript html5 canvas

我遇到了问题createPattern的问题。我有两个盒子,按下一个键杆后都会移动:

实施例: http://jsfiddle.net/wA73R/1/

问题是由createPattern填充的框背景也在移动。怎么避免呢?有什么解决方案吗?大盒子只是一个例子(drawImage对我来说不是很好的解决方案,我需要能重复背景图像的东西。)

感谢您的帮助

1 个答案:

答案 0 :(得分:2)

  

问题是由createPattern填充的框背景也在移动。

实际上你的问题是背景移动 - 它是静态的,而你将矩形绘制到不同的位置。

  

如何避免?

模式将始终在坐标原点绘制,其实际位置由当前变换定义。将来,您可以使用setTransform method转换模式本身,但由于目前未在任何地方实施,因此您必须更改global transformation matrix

在您的情况下,这意味着,您不是在x / y处绘制矩形,而是将整个上下文翻译为x / y并绘制矩形0 / 0然后:

ctx.fillStyle=pattern;
ctx.save();
ctx.translate(boxes[i].x - left , boxes[i].y);
ctx.fillRect(0, 0, boxes[i].width, boxes[i].height);
ctx.restore();

updated demo