画布的strokeStyle属性是否可靠地更改？

Question

这是我的代码。但出现了一个问题，大部分线条都是灰色的。

似乎有些线条被画在了两种笔触样式之上，尽管我的绘制调用实际上并没有重叠。一些线条是内部灰色的白色。我的白色线条比灰色线条更粗，所以显然它绘制了两条线。Canvas的绘制调用是异步的吗？

你有什么想法呢？

        for (var i=0; i<minor_lanes.length; i++) {
            connect(minor_lanes[i], "#333", 3);
        }

        for (var i=0; i<major_lanes.length; i++) {
            connect(major_lanes[i], "#fff", 4);
        }

        for (var i=0; i<limited_lanes.length; i++) {
            connect(limited_lanes[i], "#FFFF99", 2);
        }

        function connect(id, color, width) {
            if (!id) {
                return;
            }
            ctx.lineWidth = width;
            ctx.strokeStyle = color;
            $('#' + id).each(function() {
            var laneX = parseInt($(this).css('left')) + $(this).width()/2;
            var laneY = parseInt($(this).css('top')) + $(this).height()/2;
            ctx.moveTo(x,y);
            ctx.lineTo(laneX, laneY);
            ctx.stroke();
            });
        }

- Joren

Answer 1

我认为您忘记了

ctx.beginPath();
// draw path
// stroke
ctx.closePath();

- lostyzd

---

这就做到了。所以我只是在构建一条线的单一路径。画布绘图的文档非常稀少，让人感到沮丧。感谢您的帮助。 - Joren

如果你不了解这个页面，那么它可能会让人感到非常稀疏无聊。另外，只有 beginPath() 实际上会影响当前路径——closePath() 基本上是在最后一个子路径的起点添加了一个 lineTo()，然后从那个点开始新建一个子路径。 - ellisbben

ctx.closePath() 隐式调用 ctx.stroke() 吗？ - Ivan Rubinson

Answer 2

重要提示：

在绘制之前（fillRect，strokeRect等），始终先设置样式（fillStyle，strikeStyle等）。

- SomeOne