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

использование 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';
}

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

173
alpha canvas html5 opacity transparency

7 ответов

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

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

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

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

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

EDIT:

после дальнейшего копания я пришел к выводу, что вы можете установить прозрачность изображения, установив globalAlpha параметр перед рисованием изображения:

//works with images
ctx.globalAlpha = 0.5

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

268

более простой пример кода для использования 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' последние, чтобы гарантировать, что ваш onload обработчик вызывается на всех платформах, даже если изображение уже находится в кэше.

  • оберните изменения в такие вещи, как globalAlpha между save и restore (на самом деле используйте их много), чтобы убедиться, что вы не колотите настройки из в другом месте, особенно когда биты кода чертежа будут вызываться из событий.

103

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

Это легко сделать. Попробуйте этот код, заменив " 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.

14

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

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

для управления пикселями мы будем использовать две функции здесь-getImageData и putImageData

методам getImageData функция использование:

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

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

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

здесь контекст - это 2D-контекста Canvas

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

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 здесь

11

вы можете. Прозрачный холст можно быстро выцветать с помощью пункт назначения-out глобальная составная операция. Это не 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';
7

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

-2

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

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

-11