Можно ли сделать изображение с градиентно-прозрачным/слоем с использованием холста?

Ответ 1

Я добавил здесь код http://code.google.com/p/canvasimagegradient/, который добавляет функцию drawImageGradient в CanvasRenderingContext2D. Вы можете нарисовать изображение с линейным или радиальным градиентом. Он не работает в IE, даже с excanvas, из-за отсутствия поддержки getImageData/putImageData.

Следующий код, например, будет рисовать изображение с радиальным градиентом (извлечение контекста и загрузка изображения не показаны):

var radGrad = ctx.createRadialGradient(
    img.width / 2, img.height / 2, 10, 
    img.width / 2, img.height / 2, img.width/2);
radGrad.addColorStop(0, "transparent");
radGrad.addColorStop(1, "#000");

ctx.drawImageGradient(img, 112.5, 130, radGrad);

Код работает следующим образом:

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

Очевидно, что производительность - это проблема, когда изображения становятся больше. Изображение на http://code.google.com/p/canvasimagegradient/ требуется примерно 6-10 мс для рисования. Изображение 1024x768 занимает около 100 мс-250 мс для рисования. Все еще можно использовать, хотя вы не анимации.

Ответ 2

Его можно использовать context.globalCompositeOperation, чтобы сделать маску

context.drawImage(img, 0, 0, img.width, img.height, 0,0, img.width, img.height);
context.globalCompositeOperation = "destination-out";
gradient = context.createLinearGradient(0, 0, 0, img.height);
gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
context.fillStyle = gradient;
context.fillRect(0, 0, img.width, img.height);

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

Ответ 3

Чтобы правильно объединить два изображения, используя маску прозрачности, сначала необходимо взять одно из двух изображений и поместить его в холст без экрана и добавить желаемую маску прозрачности с помощью context.globalCompositeOperation = destination-out за ответ @Tommyka

var offscreen = document.createElement('canvas'); // detached from DOM
var context = offscreen.getContext('2d');
context.drawImage(image1, 0, 0, image1.width, image1.height);

var gradient = context.createLinearGradient(0, 0, 0, img.height);
gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
context.globalCompositeOperation = "destination-out";
context.fillStyle = gradient;
context.fillRect(0, 0, image1.width, image1.height);

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

var onscreen = document.getElementById('mycanvas');
var context2 = onscreen.getContext('2d');
context2.drawImage(image2, 0, 0, image2.width, image2.height);
context2.drawImage(offscreen, 0, 0, onscreen.width, onscreen.height);

Демо на http://jsfiddle.net/alnitak/rfdjoh31/4/

Ответ 4

Если вам нужно сделать прозрачное изображение, установите ctx.globalAlpha в нужное вам положение (1, без прозрачности, по умолчанию). Затем reset после рисования вашего изображения. Этот URL, вероятно, также поможет https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing.