鼠标移动时画布createPattern（）和fill（）矩形渲染

Question

Iv`e创建了画布指针错误。它显示了所需位置（鼠标位置）的目标：

http://jsfiddle.net/conmute/rk276q3g/

问题出在Firefox渲染中，（快速移动鼠标）：

http://jsfiddle.net/conmute/rk276q3g/1/

矩形行为奇怪，我错过了什么。有人能指出究竟是什么意思吗？

ctx.rect(
    // start x,y pair
    patternOffset.x, -p.circle.h/2 - patternOffset.y - 12,
    // end x,y pair
    -p.repeat.w, distance - p.circle.h - 1
);

ctx.fillStyle = pattern;
ctx.fill();

状态更新

我解决了这个问题： http://jsfiddle.net/rk276q3g/2/

通过注释掉ctx.save（）和.restore（） 并在绘制矩形之前放置箭头图像。

所以实际上我解决了这个问题，但问题是......

问题更新

...如果我在做了一些ctx.translate（......和一些图纸之后）需要画画怎么办？

我需要使用ctx.save（）和.restore（）方法，但它会导致问题。如何在不评论的情况下完成这项工作？因为当我删除它时它解决了问题。

我认为我理解他们是如何工作的，但我知道我不会。

更新

通过删除所有ctx.restore()和ctx.save()似乎解决了解决方案，但是当我通过计算以前的位置添加我的部分以便在我translate之后绘制时，问题再次出现！

请参阅： http://jsfiddle.net/rk276q3g/5/

Answer 1

save()和restore()的工作方式如下：<canvas>维护其状态堆栈，堆栈中的每个项目代表上下文的所有属性（lineStyle ，strokeWidth，transform，...）。通过调用save()，可以创建状态的新项并将其推送到堆栈。通过调用restore()，项目将从堆栈中弹出，并且画布的状态将设置为堆栈顶部项目的属性。

Here就是一个很好的例子。

回答你的问题：你需要在翻译和旋转它之前保存上下文的状态，在堆栈上创建一个新的当前项目，你可以根据需要进行修改。一旦你完成了繁重的工作并希望根据默认值绘制一些东西，你需要恢复状态，每个绘制操作都将基于默认值。

为了不像你那样遇到冲突，我总是按照这种模式编写绘画方法：

function drawSomethingFanzy (ctx) {
    ctx.save();

   //some really awesome drawing here;

   ctx.restore();
}

修改

我错过了指出save()在堆栈上创建了一个新项目，但没有恢复默认设置，所有设置保持不变，但保存后可以restore() - 稍后编辑上。

修改

我附上了结果的屏幕截图，该结果显示在我的电脑中。对于我看起来正确的我也可以发布一张图片，说明确切的问题是什么，或者你想要实现什么？老实说，我不明白问题所在。你是说填充图案中的间隙吗？

<强>更新

我只是有一个时刻，并创造了一个我认为你想要的小提琴here。我希望它有所帮助！