1

编辑2:

Chrome 版本 35 中似乎没有不需要的行为

/编辑2


编辑:

我在澄清究竟是什么问题时遇到了一些麻烦。但是,定义路径后的任何转换都不应再影响路径,但这似乎是现在正在发生的事情。第二次清除堆栈会弄乱已经定义的路径。

http://jsfiddle.net/HwLvU/4/

/编辑


在过去的 8 个月里,我一直在开发一些在所有 5 种主要浏览器中都运行良好的绘图程序。嗯,直到今天。

为了防止线宽的缩放,我在渲染之前清除了转换堆栈,这一直很好,它仍然有效,除了在 Chrome 中。从今天起。

我想知道我正在做的事情是否存在根本性的错误,或者只是 Chrome。问题是,在创建路径之后,我应该能够对转换堆栈做任何我想做的事情,并且它不应该影响创建的路径的位置、缩放或旋转。

我正在尝试做的目标是拥有一个完全独立于形状特定转换的固定线宽。

// window specific transformation
ctx.setTransform(1, 0, 0, 1, 0, 0); // clear stack
ctx.translate(300, 300);
ctx.scale(1, -1);

// shape specific transformation
ctx.transform(a, b, c, d, e, f);

createPathOfShape(ctx);

// prevent scaling of line width
ctx.setTransform(1, 0, 0, 1, 0, 0); // clear stack

ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.stroke();
4

1 回答 1

1

我确认您的小提琴在最新的 Chrome 与最新的 IE 和 FF 中的行为不同。

更新:来自 whatWG.org:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-paths-to-the-canvas

4.12.4.2.13 画布的绘制路径

上下文始终具有当前默认路径。当前只有一个默认路径,它不是绘图状态的一部分

当预期路径为当前默认路径时,不受变换影响。(这是因为转换在构建时已经影响了当前的默认路径,因此在绘制时应用它会导致双重转换。)

于 2013-11-13T15:34:37.950 回答