HTML 5: удалить цвет с холста в позиции щелчка мыши

Question

У меня есть <canvas> с фоном со спиной, покрывающим другой HTML-элемент под ним.

Чего я хочу достичь, так это: когда я перемещаю курсор мыши по холсту и нажимаю кнопку, которую хочуполучить круглую область (с заданным радиусом, где курсор мыши находится) этого холста, чтобы стать прозрачным.

Поскольку я новичок в рисовании холста, я действительно не знаю, как это сделать.Поэтому моей первой идеей было использовать context.createImageData(canvas.width, canvas.height), залить изображение черным цветом и context.putImageData(imageData) на холст.

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

Любая помощь по достижению этого будет принята с благодарностью.

Answer 1

Я создал JSFiddle для вас, используя композитинг и опцию destination-out, которая будет обрабатывать фигуры как инвертированные маски.

https://jsfiddle.net/ytbfnpa9/

const MASK_RADIUS = 50

const myCanvas = document.getElementById('myCanvas')
const bounds = myCanvas.getBoundingClientRect()
const ctx = myCanvas.getContext('2d')

function drawCircleMask(x, y, r) {
    ctx.beginPath()
    ctx.arc(x, y, r, 0, 2 * Math.PI)
  ctx.fill()
}

ctx.fillStyle = '#000000'
ctx.fillRect(0, 0, 200, 200)

/**
* Use compositing to treat shapes as masks
*/
ctx.globalCompositeOperation = 'destination-out'

myCanvas.addEventListener('click', e => {
    const x = e.clientX - bounds.left
  const y = e.clientY - bounds.top

  drawCircleMask(x, y, MASK_RADIUS)
})

Answer 2

Свойство контекста canvas globalCompositeOperation - это то, что вы ищете.Установка этого свойства влияет на то, как новые фигуры взаимодействуют с предыдущими.При установке значения «назначение-выход» фигуры, нарисованные впоследствии, будут вырезаны из ранее нарисованных фигур.

Вот пример:

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

//fill canvas with black
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

//carve circle out of it
ctx.globalCompositeOperation = "destination-out";
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = "white";
ctx.fill();

<div style="width: 500px; height: 300px; position: relative;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis orci vitae ex viverra, eu consequat diam pharetra. Maecenas quis odio eget eros imperdiet porttitor. Nam at condimentum arcu, eget eleifend metus. In vehicula varius justo a aliquet. Etiam ac mollis justo. Nunc dapibus massa magna, nec rhoncus arcu aliquam a. Proin condimentum sem vitae dui interdum, at congue massa blandit. Phasellus fringilla velit ultrices, suscipit risus ac, commodo justo. Pellentesque sed leo massa.

Integer non magna iaculis, aliquet odio vitae, semper felis. Aliquam ultrices cursus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean auctor felis purus, eu eleifend neque sodales eget. Donec eu mattis erat. Morbi libero ante, ornare eget scelerisque vel, placerat quis nulla. Maecenas congue cursus purus, at placerat libero finibus vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse dignissim neque sapien, et scelerisque mi efficitur vitae. Nam bibendum felis eu leo venenatis, ac semper sem sagittis. Fusce suscipit varius orci. Sed ut mi justo.

<canvas width="500" height="300" style="position: absolute; top: 0; left: 0;"></canvas>
</div>