HTML 5 холст рисунок изображение не показывает CSS

Question

Когда я пытаюсь нарисовать изображение на холсте с предварительно загруженным изображением с помощью css, например:

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

Я считаю, что изображение рисуется так, как оно выглядит без CSS. Поддерживают ли холсты HTML CSS? Если нет, то есть ли способ наложить прозрачность png на цвет только на непрозрачных пикселях?

Answer 1

Можно наложить изображение, нарисованное на холсте, проанализировав каждый пиксель нарисованного изображения, а затем наложив прямоугольник 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);
    }

}

Поскольку функция принимает значения x и y, изображение, предоставленное пользователем, будет проанализировано и наложено только на пиксели, которые не являются прозрачными по координате, заданной пользователем, с учетом значения rgba. Я обнаружил, что этот процесс может привести к некоторой задержке, но его можно преодолеть, сохранив массив pData и используя вторую половину функции, чтобы снова нарисовать массив на экране.

Answer 2

Посмотрите на пример здесь w3schools , который поможет вам начать загрузку изображения и скопировать его на холст. Если вам не нужно, чтобы исходное изображение отображалось на странице, добавьте '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);
};

Answer 3

Canvas не отображает CSS независимо от того, какой CSS вы используете для изображения, он всегда будет отображать обычное изображение, если вы не рисуете границы или фон самостоятельно

Answer 4

Можете ли вы указать больше о наших требованиях?

Вы не можете установить цвет фона изображения, которое будет рисовать прямо с холста. если вы меняете цвет, он будет отражаться на исходном изображении.

Вы должны сделать это из исходного элемента. Если вы хотите заполнить размер поля каким-либо цветом, вы можете использовать fillStyle из ctx перед рисованием.