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
之后绘制时,问题再次出现!
答案 0 :(得分:0)
save()
和restore()
的工作方式如下:<canvas>
维护其状态堆栈,堆栈中的每个项目代表上下文的所有属性(lineStyle
,strokeWidth
,transform
,...)。通过调用save()
,可以创建状态的新项并将其推送到堆栈。通过调用restore()
,项目将从堆栈中弹出,并且画布的状态将设置为堆栈顶部项目的属性。
Here就是一个很好的例子。
回答你的问题:你需要在翻译和旋转它之前保存上下文的状态,在堆栈上创建一个新的当前项目,你可以根据需要进行修改。一旦你完成了繁重的工作并希望根据默认值绘制一些东西,你需要恢复状态,每个绘制操作都将基于默认值。
为了不像你那样遇到冲突,我总是按照这种模式编写绘画方法:
function drawSomethingFanzy (ctx) {
ctx.save();
//some really awesome drawing here;
ctx.restore();
}
修改强>
我错过了指出save()
在堆栈上创建了一个新项目,但没有恢复默认设置,所有设置保持不变,但保存后可以restore()
- 稍后编辑上。
修改强>
我附上了结果的屏幕截图,该结果显示在我的电脑中。对于我看起来正确的我也可以发布一张图片,说明确切的问题是什么,或者你想要实现什么?老实说,我不明白问题所在。你是说填充图案中的间隙吗?
<强>更新强>
我只是有一个时刻,并创造了一个我认为你想要的小提琴here。我希望它有所帮助!