есть 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