JavaScript Canvas createPattern

本文关键字：createPattern Canvas JavaScript 更新时间：2023-09-26

画布createPattern有问题。我有两个盒子，按下一个键后都会移动箭头：

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

问题是createPattern填充的框背景也在移动。如何避免这种情况？有什么解决办法吗？大盒子只是一个例子（drawImage对我来说不是一个好的解决方案，我需要一些可以重复背景图像的东西）。

感谢您的帮助

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

实际上，你的问题是背景是而不是移动的——当你把矩形画到不同的位置时，它是静态的。

如何避免这种情况？

图案将始终绘制在坐标原点，其实际位置由当前变换定义。将来，您将能够使用setTransform方法转换模式本身，但由于目前没有在任何地方实现，因此您将不得不更改全局转换矩阵。

在您的情况下，这意味着，您不需要在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();

（更新的演示）