Html 画布，在ctx.drawImage上覆盖img颜色

我想在ctx.drawImage上叠加img颜色。 ctx.fillStyle=FFFFFF，不适用于图像写入

你知道怎么做吗

我正在用alpha通道书写非规则形状的图像，以创建美国地图。 我想在不同的颜色上给每个州涂上颜色

我正在将图像写入画布，就像循环中的那样：

var canvas=document.getElementById("map-canvas");
var ctx=canvas.getContext("2d");

for (var i = 1; i <= pvp.statesCount; i++) {
    var prefix = (i < 10) ? '0' : ''; 
    pvp.states[i] = './assets/Map/state_'+prefix+i+'.png';

    var img=document.getElementById(pvp.states[i]);
    ctx.fillStyle="#FFFFFF";
    ctx.drawImage(img,0,0, canvas.width, canvas.height);
};

---

fillStyle类似于CSS颜色样式，它实际上并不绘制任何东西，只是设置画布的笔刷颜色。您需要做的是创建概述一个状态的路径命令，然后调用context.fillStyle和context.fill以使用所需颜色填充该状态路径。对每个州重复。这是美国各州的画布地图，创建路径为：.Thanx！你帮了我很多忙！现在，我可以使用填充绘制每个州，而无需重新绘制整个地图。如果您的地图上有您希望在其上绘制的图像数据，您可能还希望稍后尝试其中一些操作：