Как изменить непрозрачность (Альфа, прозрачность) элемента в элементе 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';
}

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

7 173
html5 canvas transparency opacity alphabet

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

103

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

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

пост старый до сих пор я пойду с моим предложением. Предложение основано на манипуляции с пикселями в контексте холста 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

вы можете. Прозрачный холст может быть быстро исчезли с помощью destination-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