suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript implementiert einen kreisförmigen Radiergummi für die Leinwand

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

王林
王林Original
2023-05-17 15:17:071229Durchsuche

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>

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

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

代码解释：

  • 我们还增加了一个eraserRadius变量，用于保存当前擦除半径，以及一个eraserColor变量，用于保存当前擦除颜色。
  • 我们使用HTML中的d5fd7aea971a85678ba271703566ebfd元素和dc6dce4a544fdca2df29d5ac0ea9906b元素，在canvas之外创建了一个橡皮擦大小调节器和颜色选择器，用于动态调整橡皮擦的大小和颜色。
  • 当用户移动鼠标时，我们通过document.getElementById()获取到橡皮擦的DOM元素，并根据当前鼠标的位置设置它的left和top
    • Dann haben wir uns das mousedown-Ereignis und das mouseup-Ereignis der Leinwand angehört, die verwendet werden, um 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 d5fd7aea971a85678ba271703566ebfd-Element und das dc6dce4a544fdca2df29d5ac0ea9906b-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!

JavaScript html 事件 dom 选择器 canvas input 鼠标事件
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Webbrowser WTL-Javascript-FehlerbehandlungNächster Artikel：Webbrowser WTL-Javascript-Fehlerbehandlung

In Verbindung stehende Artikel

Mehr sehen