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

【问题标题】：How can I create different patterns for the same image in <canvas>如何在 <canvas> 中为同一图像创建不同的图案
【发布时间】：2012-08-02 09:09:20
【问题描述】：

我有一张图片，我想在画布中以不同的旋转多次显示同一张图片。为此，我使用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() 并将其分配给不同的变量不起作用。

【问题讨论】：

标签： javascript html image canvas

【解决方案1】：

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

【讨论】：