context2d.strokeText()在FF3.6/4下描边路径

Question

我在FF (3.6和4beta4)下的strokeText遇到了一个奇怪的效果，我不能在Chrome或Safari下重现。如果我绘制了一个填充的路径形状(但没有描边)，然后绘制了一个描边文本，则在调用strokeText()时会对路径进行描边。

下面是我的代码：

            var el = document.getElementById('canvas'),
            ctx = el.getContext('2d');

        ctx.save();
        // draw Rect
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.lineTo(200, 100);
        ctx.lineTo(200, 200);
        ctx.lineTo(100, 200);
        ctx.lineTo(100, 100);
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();

                    // draw Text
        ctx.save();         
        ctx.textAlign = 'start';
        ctx.fillStyle = "rgba(0,0,0,0.0)";
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 2;
        ctx.font = "bold 35pt sans-serif";
        ctx.strokeText("Hello World !", 100, 280);  

        ctx.restore();

如果运行它，rect会以蓝色描边，而它不应该是蓝色的。

你是否发现这段代码有什么问题，或者是FF中的一个bug？

谢谢！

Answer 1

这个问题已经在Firefox4beta 8中修复了(刚刚测试过...)。我认为相关的bug是：https://bugzilla.mozilla.org/show_bug.cgi?id=499628

Answer 2

这样画长方形怎么样？

var el = document.getElementById('canvas'),
ctx = el.getContext('2d');

ctx.save();
// draw Rect
ctx.fillStyle = 'red';
ctx.fillRect  (100, 100, 100, 100); // <===
// draw Text
ctx.save();         
ctx.textAlign = 'start';
ctx.fillStyle = "rgba(0,0,0,0.0)";
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.font = "bold 35pt sans-serif";
ctx.strokeText("Hello World !", 100, 280);  

ctx.restore();

编辑下面的关于strokeText的问题，似乎如果你在绘制和填充路径之前绘制文本就可以解决它

var el = document.getElementById('canvas'),
ctx = el.getContext('2d');

// draw Text -> at first
ctx.save();         
ctx.textAlign = 'start';
ctx.fillStyle = "rgba(0,0,0,0.0)";
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.font = "bold 35pt sans-serif";
ctx.strokeText("Hello World !", 100, 280);

ctx.save();
// draw Rect
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

ctx.restore();