如何在<canvas> </canvas>中为同一图像创建不同的图案

Question

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

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

我的问题是虽然我使用了save()和restore()，但我使用的最后一个createPattern()也影响了第一个fillStyles，并将所有图片都绘制在一个回转。如何使用context.rotate()旋转它来为同一图像创建不同的图案？

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

Answer 1

好的我明白了。在开始填充或描绘画布中的新零件时，应使用context.beginPath()。我最初没有使用它，我只使用moveTo()并移动了上下文，到处调用fill()s。看起来它有效，但createPattern()出现了这个问题。因此，为了您的安全，对于您决定填充或描边的每个复杂形状，始终以context.beginPath()开头。