image - 在画布中重置图像模式

Question

我正在使用图像填充自定义形状的路径，并启用了重复选项。我画了一幅画，非常好，然后通过用户的点击，我想要改变我的形状的位置。我清除上下文，然后在其他地方画出我的路径，一切都正确；但图像的重复模式保持不变。当用户单击时，我再次调用 createPattern()，如下面的代码所示，但该调用不会创建新模式，而是使用旧模式。因为我改变了形状的位置，所以当我进行初始绘图时，它的内部被填充了图像的任何部分。

那么如何重置图像的图案，以便它可以在其他地方正确开始填充图像？是否可以？context.translate 会起作用吗？我认为翻译行不通，因为我在填写之前已经翻译了上下文。

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

    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();

...
}

Answer 1

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