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

196

Используя <canvas>элемент HTML5 , я хотел бы загрузить файл изображения (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';
}

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

html canvas transparency opacity alpha Джо Ленсиони
источник

307

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

//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функция, ищите ее, чтобы создать цикл, из которого вы изменяете альфа через время.

djdolber
источник

7

globalAlpha работает отлично. Является частью стандарта: whatwg.org/specs/web-apps/current-work/multipage/…

Aleris

42

Чтобы быть точным, это не canvasэлемент, который имеет globalAlphaсвойство, а контекст, который вы получаете из холста.

Стив Блэквелл

8

Приведенный ниже комментарий Яна о ctx.save () и ctx.restore () предотвращает влияние globalAlpha на остальную часть холста.

Аросборо

1

Мне кажется, что вместо того, чтобы контролировать непрозрачность того, что нарисовано на холсте, это было бы проще и все еще служило бы цели просто контролировать непрозрачность всего холста после того, как изображение нарисовано (только один раз). Для этого используйте обычные методы CSS / style (canvaselement.style.opacity = '0.3' и т. Д.) Позже с помощью CSS3 вы даже можете вообще отказаться от цикла и просто позволить браузеру вместо этого обрабатывать замирание (что-то вроде - transition: NNNms непрозрачность, легкость входа-выхода) или даже "оживление" угасания.

Чак Колларс

1

К сожалению, canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)";не работает. Значение должно быть в шестнадцатеричном виде.

WebWanderer

113

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

Ян
источник

globalAlpha будет размыть все изображения или рисунки на холсте, это не то, что вы хотите.

Сердитый

6

@ Сердитый - нет, globalAlphaничего не стирает . Он установит альфа для всего последующего рисования (он не меняет ничего уже нарисованного), поэтому в коде примера я обертываю его saveи restoreограничиваю то, к чему он применяется.

Ян

не уверен, что ctx.restore () восстановит globalAlpha, возможно, вам также понадобится это сделать в конце (по крайней мере, в предыдущих версиях Chrome) ctx.globalAlpha = 1;

Шон

1

@Sean - Если вы не уверены, вы должны проверить. Должно быть, это был очень старый Chrome, теперь он работает на всех платформах: jsfiddle.net/y0z9h9m7

Ян

14

Редактировать: ~~Ответ, помеченный как «правильный», не является правильным.~~

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

james.garriss
источник

13

Пост старый, пока я пойду с моим предложением. Предложение основано на манипулировании пикселями в контексте Canvas 2D. От MDN:

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

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

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

var myImageData = context.getImageData (left, top, width, height);

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

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

Где контекст - это ваш холст 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 здесь

Добродушный человек
источник

7

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

Og2t
источник

3

Я думаю, что это лучше всего отвечает на вопрос, фактически изменяет альфа-значение того, что уже нарисовано. Может быть, это не было частью 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 );
}

Dillon
источник

Чем этот ответ отличается от ответа Soul_man, который был дан более подробно 7 лет назад?

BReddy

-2

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

ЕКС
источник

-11

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

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

MPG
источник

5

Это неправильный ответ, см. Ниже

Райан Бадур

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

MPG

2

MPG - ваш комментарий (11 мая) тоже неверен. Вы можете изменить прозрачность холста, но это не то, чего хотел ОП, и не то, что предлагается в ответах выше.

Ян

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

Ответы: