Image 在画布中重置图像模式

我正在用图像填充自定义形状的路径，并启用了“重复”选项。我画了一张非常漂亮的图，然后用户点击一下，我想改变我形状的位置。我清除了背景，然后在其他地方画出了我的道路，一切都是正确的；但图像的重复模式保持不变。当用户单击时，我再次调用createPattern（），如下面的代码所示，但该调用不会创建新模式，而是使用旧模式。因为我改变了形状的位置，所以它的内部填充了我绘制初始图形时图像的任何部分

那么，我如何重置图像的模式，以便它可以正确地开始在其他地方填充图像？可能吗？你会翻译工作吗？我认为翻译不管用，因为我在填写之前已经翻译了上下文

这是代码的一部分。坐标变量并不重要，我认为：

    updatePicture(){ // called each time the user clicks, and should draw in different positions

...
    context.save();
    context.translate(x, y);
    context.rotate(270 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);

    context.beginPath();
    context.moveTo(0 - (tablo.height / scale_cerceve) - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - (tablo.height / scale_cerceve) - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + paspartu_height, 0 - paspartu_height);
    context.closePath();
    var cercevePattern = context.createPattern(cerceve, "repeat");
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // 
    context.save();
    context.translate(x, y + tablo.height);
    context.rotate(180 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 + paspartu_height, 0 - paspartu_height);
    context.lineTo(0 + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 - (tablo.width / scale_cerceve) - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 - (tablo.width / scale_cerceve) - paspartu_height, 0 - paspartu_height);
    context.closePath();
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // 
    context.save();
    context.translate(x, y);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo(0 + (tablo.width / scale_cerceve) + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
    context.lineTo((tablo.width / scale_cerceve) + paspartu_height, 0 - paspartu_height);
    context.closePath();
    context.fillStyle = cercevePattern;
    context.fill();
    context.restore();

    // t
    context.save();
    context.translate(x + tablo.width, y);
    context.rotate(90 * TO_RADIANS);
    context.scale(scale_cerceve, scale_cerceve);
    context.beginPath();
    context.moveTo(0 - paspartu_height, 0 - paspartu_height);
    context.lineTo(0 - cerceve.height - paspartu_height, 0 - cerceve.height - paspartu_height);
context.lineTo(0 + (tablo.height / scale_cerceve) + cerceve.height + paspartu_height, 0 - cerceve.height - paspartu_height);
context.lineTo(0 + (tablo.height / scale_cerceve) + paspartu_height, 0 - paspartu_height);
context.closePath();
context.fillStyle = cercevePattern;
context.fill();
context.restore();

...
}

---

是的，就是这样做的。你可以看到我的评论

我想我明白了，但还没有试过。我想我应该把上下文转换到我要开始这条路径的确切位置，然后可能并且希望它能根据新的模式填充图像。有关问题,，