Как изменить непрозрачность (альфа, прозрачность) элемента в элементе холста после того, как это было оттянуто?
Использование 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';
}
Кто-то укажет на меня в правильном направлении как свойство для установки или функция для вызова, который изменит непрозрачность?
2 ответа
Я также ищу ответ на этот вопрос (чтобы уточнить, я хочу иметь возможность рисовать изображение с определяемой пользователем непрозрачностью, например, как вы может рисовать фигуры с непрозрачностью), если вы рисуете примитивными фигурами, вы можете установить цвет заливки и обводки с альфа-каналом, чтобы определить прозрачность. Насколько я сейчас пришел к выводу, это не влияет на прорисовку изображений.
//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 , посмотрите на нее, чтобы создать цикл, из которого вы изменяете альфа поверх время.
Вы не можете. Это графика в немедленном режиме. Но вы можете как бы смоделировать это, нарисовав над ним прямоугольник в цвете фона с непрозрачностью.
Если изображение окрашено не в постоянный цвет, оно становится немного сложнее. В этом случае вы должны уметь использовать методы манипулирования пикселями. Просто сохраните область, прежде чем рисовать изображение, а затем снова наложите на нее прозрачность.