javascript - 如何为同一图像创建不同的模式

Question

我有一张图片，我想在画布上以不同的旋转多次显示同一张图片。为此，我使用context.rotate()旋转图像并context.fill()绘制它。为了能够使用 显示图像fill()，我首先需要使用createPattern()方法，如：

context.save();
var altPattern = context.createPattern(image, "repeat");
context.fillStyle = altPattern;
context.restore();

我的问题是，虽然我使用save()and restore()，但我使用的最后一个也会createPattern()影响第一个fillStyles，并在一次旋转中绘制所有图像。如何在使用context.rotate()旋转时为同一图像创建不同的图案？

再次调用createPattern()并将其分配给不同的变量不起作用。

Answer 1

Ok I got it. You should use context.beginPath() when beginning to fill or stroke a new part in the canvas. I didn't use it at first, I just used moveTo() and moved the context around, calling fill()s everywhere. It looked like it was working, but with createPattern() this problem came out. So for your safety, always begin with context.beginPath() for every complex shape you decide to fill or stroke.