0

我创建了画布指针错误。它显示目标到所需位置（鼠标位置）：

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/

4

1 回答 1

0

和工作如下：维护其状态的堆栈save()，堆栈中的每个项目代表上下文的所有属性（, , , ...）。通过调用一个新的状态项被创建并压入堆栈。通过调用从堆栈中弹出项目并将画布的状态设置为堆栈顶部项目的属性。restore()<canvas>lineStylestrokeWidthtransformsave()restore()

这是一个很好的例子。

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

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

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

   //some really awesome drawing here;

   ctx.restore();
}

编辑

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

编辑

我附上了一张结果的截图，它从小提琴出现在我的电脑上。对我来说这看起来是正确的，所以请张贴一张图片来显示确切的问题是什么，或者你想要实现什么？老实说，我不明白问题出在哪里。你的意思是填充图案中的空隙吗？

更新

我只是有一点时间，创造了我认为你想要的东西。我希望它有帮助！

在此处输入图像描述

于 2014-11-03T09:09:23.807 回答