javascript - HTML Canvas 用相同的颜色绘制所有对象，尽管它们的颜色属性不同

//设置

var a_canvas = document.getElementById("a"); var context = a_canvas.getContext("2d");

//绘制图表

    function drawGraph(){
    for(i in data.nodes)
    {
            console.log(data.nodes[i].color);

            context.fillStyle = data.nodes[i].color;
            context.rect(data.nodes[i].x,data.nodes[i].y,data.nodes[i].size,data.nodes[i].size);
            context.fill();

    }
}

控制台日志:

黄色黄色的蓝色

但是所有矩形都是用蓝色绘制的。

我应该做什么，用给定的颜色绘制填充所有矩形。

最佳答案

调用context.fill会填充当前路径中绘制的内容。而且您永远不会重置，因此您将始终使用列表中的最后一种颜色填充所有矩形。

在设置fillStyle之前使用context.beginPath()，后续填充只会影响当前路径。

Fiddle

关于javascript - HTML Canvas 用相同的颜色绘制所有对象，尽管它们的颜色属性不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47346892/