Как изменить непрозрачность (альфа, прозрачность) элемента в элементе холста после его рисования?

Используя элемент HTML5 <canvas>, я хотел бы загрузить файл изображения (PNG, JPEG и т.д.), полностью прозрачно нарисовать его на холсте, а затем затушить его. Я выяснил, как загрузить изображение и нарисуйте его на холсте, но я не знаю, как изменить его непрозрачность после его рисования.

Вот код, который у меня есть до сих пор:

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

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

Ответы

Ответ 1

Я также ищу ответ на этот вопрос (чтобы уточнить, я хочу иметь возможность рисовать изображение с заданной пользователем непрозрачностью, например, как вы можете рисовать фигуры с непрозрачностью), если вы рисуете с примитивными фигурами, вы можете установить заливку и обводку цвет с альфа, чтобы определить прозрачность. Насколько я пришел к выводу, это никак не влияет на рисование изображений.

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

Я пришел к выводу, что настройка globalCompositeOperation работает с изображениями.

//works with images
ctx.globalCompositeOperation = "lighter";

Интересно, есть ли какой-то третий способ настройки цвета, чтобы мы могли тонировать изображения и делать их прозрачными.

РЕДАКТИРОВАТЬ:

После дальнейших раскопок я пришел к выводу, что вы можете установить прозрачность изображения, установив параметр globalAlpha ПРЕЖДЕ ЧЕМ вы рисуете изображение:

//works with images
ctx.globalAlpha = 0.5

Если вы хотите добиться эффекта затухания с течением времени, вам нужен какой-то цикл, который изменяет альфа-значение, это довольно просто, одним из способов добиться этого является функция setTimeout, посмотрите, чтобы создать цикл, из которого вы изменяете альфа-канал. через некоторое время.

Ответ 2

Несколько простых примеров кода для использования globalAlpha:

ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();

Если вам нужно загрузить img:

var img = new Image();
img.onload = function() {
    ctx.save();
    ctx.globalAlpha = 0.4;
    ctx.drawImage(img, x, y);
    ctx.restore()
};
img.src = "http://...";

Примечания:

Установите 'src' last, чтобы гарантировать, что обработчик onload вызывается на всех платформах, даже если изображение уже находится в кеше.
Оберните изменения в вещи, такие как globalAlpha между save и restore (на самом деле используйте их много), чтобы убедиться, что вы не используете настройки clobber из других источников, особенно если биты кода рисования будет вызываться из событий.

Ответ 3

Изменить: ~~Ответ, помеченный как "правильный", неверен.~~

Это легко сделать. Попробуйте этот код, заменяя "ie.jpg" на любую картинку, которую вам удобно:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;

            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 100);
            }

            function fadeIn()
            {
                context.clearRect(0,0, canvas.width,canvas.height);
                context.globalAlpha = ga;
                var ie = new Image();
                ie.onload = function()
                {
                    context.drawImage(ie, 0, 0, 100, 100);
                };
                ie.src = "ie.jpg";

                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

Ключом является свойство globalAlpha.

Протестировано с помощью IE 9, FF 5, Safari 5 и Chrome 12 на Win7.

Ответ 4

Сообщение старое, пока я поеду с моим предложением. Предложение основано на манипуляции с пикселями в контексте canvas 2d. Из MDN:

Вы можете напрямую манипулировать пиксельными данными в холстах на уровне байта

Чтобы манипулировать пикселями, мы будем использовать здесь две функции: getImageData и putImageDatap >

Использование функции getImageData:

var myImageData = context.getImageData(слева, сверху, шириной, высотой);

и синтаксис putImageData:

context.putImageData(myImageData, dx, dy);//dx, dy - x и y смещение на вашем холсте

Где контекст - это ваш контекст canvas 2d

Итак, чтобы получить значения красного зеленого и альфа-значения, мы сделаем следующее:

var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

Где x - смещение по оси x, y - смещение y на холсте

Итак, у нас есть код, делающий изображение полупрозрачным

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

Вы можете сделать свои собственные "шейдеры" - см. полную статью MDN здесь

Ответ 5

Вы можете. Прозрачный холст можно быстро потушить, используя глобальную композиционную операцию назначения. Он не на 100% идеален, иногда он оставляет некоторые следы, но его можно настроить, в зависимости от того, что необходимо (например, использовать "источник" и заливать его белым цветом с альфой на 0,13, затем исчезать, чтобы подготовить холст).

// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';

Ответ 6

Я думаю, что это лучше всего отвечает на вопрос, на самом деле оно меняет альфа-значение того, что уже нарисовано. Может быть, это не было частью API, когда был задан этот вопрос.

заданный 2d контекст c.

function reduceAlpha(x, y, w, h, dA) {
    var screenData = c.getImageData(x, y, w, h);
    for(let i = 3; i < screenData.data.length; i+=4){
    screenData.data[i] -= dA; //delta-Alpha
    }
    c.putImageData(screenData, x, y );
}

Ответ 7

Если вы используете библиотеку jCanvas, вы можете использовать opacity при рисовании. Если вам нужен эффект затухания, просто перерисуйте с разными значениями.

Ответ 8

Вы не можете. Это графика немедленного режима. Но вы можете имитировать его, рисуя прямоугольник над ним в фоновом цвете с непрозрачностью.

Если изображение превышает нечто, отличное от постоянного цвета, то оно становится немного сложнее. В этом случае вы должны использовать методы манипулирования пикселями. Просто сохраните область перед рисованием изображения, а затем смешайте ее сверху сверху с непрозрачностью.