我的画布createPattern有问题。我有两个盒子,按下小键盘后它们都会移动:

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

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

谢谢你的帮助

最佳答案

问题是由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

08-04 03:32