<canvas> маска для картинки
есть 3 картинки на холсте:
pic1 = new Image() pic1.src = 'image1.png' // черный квадрат pic2 = new Image() pic2.src = 'image2.png' // синий квадрат pic3 = new Image() pic3.src = 'image3.png' // круг pic3.onload = function() { mask() } function mask() { ctx.drawImage(pic1, 0, 0) ctx.drawImage(pic2, 0, 0) ctx.drawImage(pic3, 75, 0) } надо сделать маску в форме круга для синего квадрата: pic1 = new Image() pic1.src = 'image1.png' // черный квадрат pic2 = new Image() pic2.src = 'image2.png' // синий квадрат pic3 = new Image() pic3.src = 'image3.png' // круг pic3.onload = function() { mask() } function mask() { ctx.drawImage(pic1, 0, 0) ctx.drawImage(pic2, 0, 0) ctx.globalCompositeOperation = 'destination-in' // destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение ctx.drawImage(pic3, 75, 0) } в результате круг маскирует все изображение на холсте: как сделать маску только для синего квадрата? так чтобы черный выводился полностью globalCompositeOperation определяет как будут себя вести перекрывающиеся фигуры http://xiper.net/manuals/canvas/2D-a...ositeOperation |
provigator, "старое изображение" это изображение всего холста, а не то которое ты отрисовал последним.
function mask() { ctx.drawImage(pic2, 0, 0); ctx.globalCompositeOperation = 'destination-out'; ctx.drawImage(pic3, 75, 0); ctx.globalCompositeOperation = 'destination-over'; ctx.drawImage(pic1, 0, 0); ctx.globalCompositeOperation = 'source-over'; } |
ctx.drawImage(pic1, 0, 0) ctx.drawImage(pic2, 0, 0) ctx.globalCompositeOperation = 'destination-out' ctx.drawImage(pic3, 75, 0) ctx.globalCompositeOperation = 'destination-out' оставляет все что находится вне круга, область внутри круга делает прозрачной задача: маскировать кругом только синий квадрат - вывести ту часть где они пересекаются, черный квадрат не должен маскироваться этот скрин сделал во флеше с помощью слоев |
provigator, замени out на in в моем примере тогда.
|
окей,
function mask() { ctx.drawImage(pic2, 0, 0) ctx.globalCompositeOperation = 'destination-in' ctx.drawImage(pic3, 75, 0) ctx.globalCompositeOperation = 'destination-over' ctx.drawImage(pic1, 0, 0) ctx.globalCompositeOperation = 'source-over' } работает, буду разбираться... |
Часовой пояс GMT +3, время: 13:02. |