画布 strokeStyle 不能可靠地改变？

Question

这是我的代码。出于某种原因，它画出的线条大多是灰色的。

尽管我的绘图调用实际上并没有重叠，但似乎有些线条是用两种笔触样式重叠绘制的。有些线条是白色的，内部是灰色的。我的白线比灰色的粗，所以很明显它画了两条线。画布绘制调用是异步的还是什么？

知道为什么吗？

        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();
            });
        }

Answer 1

我想你忘记了

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