Javascript HTML5画布绘图图像不显示css

当我尝试在画布上绘制带有css的预加载图像时，如：

img.style.backgroundColor="red";
ctx.drawImage(img,0,0,100,100);

---

我发现在没有css的情况下，图像的绘制方式与看上去一样。HTML画布支持css吗？如果没有，是否有一种方法可以在非透明的像素上用透明的颜色覆盖png？

您能详细说明我们的要求吗

不能设置直接从画布绘制的图像的背景色。如果更改颜色，它将在源图像中反射

---

您必须从源元素创建它。如果您想用某种颜色填充框大小，可以在绘制之前使用ctx的

fillStyle

。

看看这里的示例，它将帮助您开始如何加载图像并将其复制到画布中。如果不需要在页面上显示原始图像，请将“style=”display:none；“”添加到img标记中。要对图像着色，请结合填充矩形查看globalAlpha-大致如下：

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");

    ctx.globalAlpha = 0.5;
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#ff0000";
    ctx.fill();

    ctx.drawImage(img, 10, 10);
};

---

画布不渲染css无论您对图像使用何种css，它都将始终渲染普通图像，除非您自己绘制边框或背景

通过分析绘制图像的每个像素，然后用所需颜色覆盖1x1矩形，可以覆盖在画布上绘制的图像。下面是一个如何执行此操作的示例：

function overlayColor(img,x,y,a,r,g,b,drawWidth,drawHeight){
    //create a canvas in memory and draw the image there to analyze it
    var tmpCanvas = document.createElement('canvas');
    var context = tmpCanvas.getContext('2d');
    tmpCanvas.width = drawWidth;
    tmpCanvas.height = drawHeight;
    context.drawImage(img,0,0,drawWidth,drawHeight);
    let pData = new Array();
    for (let i = 0; i < tmpCanvas.width; i++){
        for (let j = 0; j < tmpCanvas.height; j++){
            if (context.getImageData(i, j, 1, 1).data[3] != 0){//if the pixel is not transparent then add the coordinates to the array
                pData.push([i,j]);
            }
        }
    }
    //then every pixel that wasn't transparent will be overlayed with a 1x1 rectangle of the inputted color 
    //drawn at the (x,y) origin which was also given by the user
    //this uses ctx, the context of the canvas visible to the user
    ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
    for (let i = 0; i < pData.length; i++){
        ctx.fillRect(x + pData[i][0],y + pData[i][1],1,1);
    }

}

函数叠加颜色（img、x、y、a、r、g、b、drawWidth、drawHeight）{
//在内存中创建画布并在那里绘制图像以进行分析
var tmpCanvas=document.createElement（'canvas'）；
var context=tmpCanvas.getContext（'2d'）；
tmpCanvas.width=图纸宽度；
tmpCanvas.height=图纸高度；
drawImage（img，0,0，drawWidth，drawHeight）；
设pData=newarray（）；
for（设i=0；i

---

由于该函数采用x和y值，因此用户给出的图像将被分析并仅覆盖在用户给出的坐标处不透明的像素上，rgba值也被给出。我发现这个过程可能会导致一些延迟，但可以通过保存pData数组并使用函数的后半部分在屏幕上再次绘制数组来克服它。

我有一个png，我正试图使用css着色。所以我不能使用fillStyle，因为它会覆盖透明空间。即使添加背景，它也不会着色。为此，你可以做一个变通办法。获取图像的起始位置，并添加一个与图像具有相同高度和宽度的矩形。绘制前，将图像的不透明度设置为30%或所需值。