鼠标移动时画布createPattern()和fill()矩形渲染

时间:2014-09-16 13:14:05

标签: javascript canvas fill picturefill

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/

1 个答案:

答案 0 :(得分:0)

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

Here就是一个很好的例子。

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

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

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

   //some really awesome drawing here;

   ctx.restore();
}

修改

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

修改

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

<强>更新

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

enter image description here