Javascript implementiert einen kreisförmigen Radiergummi für die Leinwand-Front-End-Fragen und Antworten-php.cn

Javascript implementiert einen kreisförmigen Radiergummi für die Leinwand

王林

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

Original

1177 Leute haben es durchsucht

In der Frontend-Entwicklung ist Canvas eine sehr wichtige Technologie. Es ermöglicht uns, verschiedene Grafiken zu zeichnen und einige sehr coole Effekte zu erzielen. In vielen Fällen müssen wir eine Radiergummifunktion implementieren, damit Benutzer einige Elemente auf der Leinwand, wie Graffiti, Bilder usw., löschen können. In diesem Artikel wird erläutert, wie Sie mithilfe von Javascript einen kreisförmigen Radiergummi für die Leinwand implementieren.

Zuerst müssen wir ein Canvas-Element erstellen und seinen Kontext abrufen:

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

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

Nach dem Login kopieren

Als nächstes müssen wir auf die Mausereignisse des Canvas hören, damit sich der Benutzer bewegen kann Mit der Maus können Sie Elemente auf der Leinwand löschen. Wir können den folgenden Code verwenden, um Folgendes zu erreichen:

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();
  }
});

Nach dem Login kopieren

Code-Erklärung:

Wir erstellen zunächst eine Variable isErasing für Identifiziert, ob die Benutzer löscht. isErasing，用于标识用户是否正在擦除。
然后，我们监听了canvas的mousedown事件和mouseup事件，用于在用户按下和松开鼠标时改变isErasing的值。
最后，我们监听了canvas的mousemove事件，当isErasing为true时，我们获取鼠标的坐标和半径，使用ctx.arc()方法绘制圆形，并使用ctx.globalCompositeOperation = "destination-out"将其与canvas上的元素进行混合，实现橡皮擦的效果。

这里需要注意的是，我们使用的是globalCompositeOperation属性的destination-out值，它表示只有当前绘制的图形与canvas上已有的图形重叠的部分会被擦除。

好了，现在我们已经实现了canvas圆形橡皮擦的功能。为了让用户更好地使用橡皮擦，我们还可以增加一些交互效果，比如显示当前擦除半径、变换擦除颜色等。完整的代码实现如下：

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`;

Nach dem Login kopieren

代码解释：

我们还增加了一个eraserRadius变量，用于保存当前擦除半径，以及一个eraserColor变量，用于保存当前擦除颜色。
我们使用HTML中的<input>元素和<div>元素，在canvas之外创建了一个橡皮擦大小调节器和颜色选择器，用于动态调整橡皮擦的大小和颜色。
当用户移动鼠标时，我们通过document.getElementById()获取到橡皮擦的DOM元素，并根据当前鼠标的位置设置它的left和top

mousedown

mouseup

zu ändern, wenn der Benutzer drückt und loslässt Maus. Der Wert von isErasing

Abschließend hören wir uns das mousemove-Ereignis der Leinwand an. Wenn isErasing true ist, erhalten wir die Koordinaten des Verwenden Sie die Methode ctx.arc(), um einen Kreis zu zeichnen, und verwenden Sie ctx.globalCompositeOperation = "destination-out", um ihn mit Elementen auf dem zu mischen Leinwand, um den Radiergummi-Effekt zu erzielen.

Hier ist zu beachten, dass wir den destination-out-Wert des globalCompositeOperation-Attributs verwenden, was bedeutet, dass nur die Aktuell gezeichnet Die Teile der Grafik, die vorhandene Grafiken auf der Leinwand überlappen, werden gelöscht.

Okay, jetzt haben wir die runde Radiergummifunktion der Leinwand implementiert. Damit Benutzer den Radierer besser nutzen können, können wir auch einige interaktive Effekte hinzufügen, z. B. die Anzeige des aktuellen Radierradius, das Ändern der Radierfarbe usw. Die vollständige Code-Implementierung lautet wie folgt:

rrreee

Code-Erklärung: #🎜🎜##🎜🎜##🎜🎜# Wir haben auch eine eraserRadius-Variable hinzugefügt, um den aktuellen Löschvorgang zu speichern Zusätzlich zum Radius gibt es auch eine Variable eraserColor, die die aktuelle Löschfarbe enthält. #🎜🎜##🎜🎜# Wir verwenden das <input>-Element und das <div>-Element in HTML, um eine Radiergummigrößenanpassung außerhalb der Leinwand zu erstellen Farbwähler zum dynamischen Anpassen der Größe und Farbe des Radierers. #🎜🎜##🎜🎜#Wenn der Benutzer die Maus bewegt, erhalten wir das DOM-Element des Radierers über document.getElementById() und setzen seinen left- und <code>top-Attribute. Auf diese Weise kann der Benutzer sehen, wie groß der aktuelle Löschradius ist. #🎜🎜##🎜🎜# Wir blenden den Radierer aus, wenn der Benutzer die Leinwand verlässt. #🎜🎜##🎜🎜#Schließlich legen wir die Radiergummigröße dynamisch fest, wenn die Seite geladen wird. #🎜🎜##🎜🎜##🎜🎜#Zusammenfassung: #🎜🎜##🎜🎜# Durch die Verwendung von Canvas und Javascript können wir ganz einfach einen anpassbaren Radiergummi implementieren. Mit diesem Radiergummi können verschiedene Graffiti, Bilder und andere Elemente gelöscht werden, wodurch das interaktive Erlebnis des Benutzers verbessert wird. In konkreten Projekten können wir maßgeschneiderte Entwicklungen entsprechend spezifischer Anforderungen durchführen, um verfeinerte Effekte zu erzielen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonJavascript implementiert einen kreisförmigen Radiergummi für die Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!