Javascript implements canvas circular eraser-Front-end Q&A-php.cn

Javascript implements canvas circular eraser

王林

Release： 2023-05-17 15:17:07

Original

1177 people have browsed it

In front-end development, canvas is a very important technology. It allows us to draw various graphics and achieve some very cool effects. In many cases, we need to implement an eraser function so that users can erase some elements on the canvas, such as graffiti, pictures, etc. This article will introduce how to use javascript to implement a canvas circular eraser.

First, we need to create a canvas element and get its context:

<html>
  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </body>
</html>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
</script>

Copy after login

Next, we need to listen to the mouse event of the canvas so that the user can erase the canvas by moving the mouse elements on. We can use the following code to achieve:

let isErasing = false;

canvas.addEventListener("mousedown", () => {
  isErasing = true;
});

canvas.addEventListener("mouseup", () => {
  isErasing = false;
});

canvas.addEventListener("mousemove", (e) => {
  if (isErasing) {
    const x = e.offsetX;
    const y = e.offsetY;
    const radius = 20;

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.globalCompositeOperation = "destination-out";
    ctx.fill();
  }
});

Copy after login

Code explanation:

We first create a variable isErasing to identify whether the user is erasing .
Then, we listened to the canvas's mousedown event and mouseup event, which are used to change isErasing when the user presses and releases the mouse. value.
Finally, we listened to the mousemove event of canvas. When isErasing is true, we get the coordinates and radius of the mouse, using ctx.arc() method draws a circle and uses ctx.globalCompositeOperation = "destination-out" to mix it with elements on the canvas to achieve the effect of an eraser.

It should be noted here that we are using the destination-out value of the globalCompositeOperation attribute, which means that only the currently drawn graphic is the same as the one already drawn on the canvas. Overlapping parts of some graphics will be erased.

Okay, now we have implemented the canvas round eraser function. In order to allow users to use the eraser better, we can also add some interactive effects, such as displaying the current erasing radius, changing the erasing color, etc. The complete code implementation is as follows:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

let isErasing = false;
let eraserRadius = 20;
let eraserColor = "#ffffff";

canvas.addEventListener("mousedown", () => {
  isErasing = true;
});

canvas.addEventListener("mouseup", () => {
  isErasing = false;
});

canvas.addEventListener("mousemove", (e) => {
  if (isErasing) {
    const x = e.offsetX;
    const y = e.offsetY;

    ctx.beginPath();
    ctx.arc(x, y, eraserRadius, 0, 2 * Math.PI);
    ctx.globalCompositeOperation = "destination-out";
    ctx.fillStyle = eraserColor;
    ctx.fill();

    const eraser = document.getElementById("eraser");
    eraser.style.left = `${x - eraserRadius}px`;
    eraser.style.top = `${y - eraserRadius}px`;
    eraser.style.display = "block";
  }
});

canvas.addEventListener("mouseleave", () => {
  const eraser = document.getElementById("eraser");
  eraser.style.display = "none";
});

const eraserRange = document.getElementById("eraserRange");
eraserRange.addEventListener("input", () => {
  eraserRadius = parseInt(eraserRange.value);
  const eraser = document.getElementById("eraser");
  eraser.style.width = `${eraserRadius * 2}px`;
  eraser.style.height = `${eraserRadius * 2}px`;
});

const eraserColorPicker = document.getElementById("eraserColorPicker");
eraserColorPicker.addEventListener("input", () => {
  eraserColor = eraserColorPicker.value;
});

const eraser = document.getElementById("eraser");
eraser.style.width = `${eraserRadius * 2}px`;
eraser.style.height = `${eraserRadius * 2}px`;

Copy after login

Code explanation:

We also added a eraserRadius variable to save the current erasure radius, and a eraserColorVariable, used to save the current erasure color.
We used the <input> element and the <div> element in HTML to create an eraser sizer and color selection outside of the canvas Converter for dynamically adjusting the size and color of the eraser.
When the user moves the mouse, we get the DOM element of the eraser through document.getElementById(), and set its left and topProperties. This way, the user can see what the current erasing radius is.
We hide the eraser when the user moves out of the canvas.
Finally, we dynamically set the eraser size when the page loads.

Summary:

By using canvas and javascript, we can easily implement a customizable circular eraser. This eraser can be used to erase various graffiti, pictures and other elements, improving the user's interactive experience. In actual projects, we can carry out customized development according to specific needs to achieve more refined effects.

The above is the detailed content of Javascript implements canvas circular eraser. For more information, please follow other related articles on the PHP Chinese website!