Javascript melaksanakan pemadam bulatan kanvas-Soal Jawab bahagian hadapan-php.cn

Javascript melaksanakan pemadam bulatan kanvas

王林

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

asal

1176 orang telah melayarinya

Dalam pembangunan bahagian hadapan, kanvas ialah teknologi yang sangat penting Ia membolehkan kami melukis pelbagai grafik dan mencapai beberapa kesan yang sangat hebat. Dalam banyak kes, kita perlu melaksanakan fungsi pemadam supaya pengguna boleh memadamkan beberapa elemen pada kanvas, seperti grafiti, gambar, dsb. Artikel ini akan memperkenalkan cara menggunakan javascript untuk melaksanakan pemadam bulatan kanvas.

Pertama, kita perlu mencipta elemen kanvas dan mendapatkan konteksnya:

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

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

Salin selepas log masuk

Seterusnya, kita perlu mendengar peristiwa tetikus kanvas supaya pengguna boleh memadamkan kanvas dengan menggerakkan elemen tetikus dihidupkan. Kita boleh menggunakan kod berikut untuk mencapai ini:

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

Salin selepas log masuk

Penerangan kod:

Kami mula-mula mencipta pembolehubah isErasing untuk mengenal pasti sama ada pengguna sedang memadam.
Kemudian, kami mendengar acara mousedown kanvas dan acara mouseup, yang digunakan untuk menukar nilai isErasing apabila pengguna menekan dan melepaskan tetikus.
Akhir sekali, kami mendengar acara mousemove kanvas Apabila isErasing ialah true, kami mendapat koordinat dan jejari tetikus, gunakan kaedah ctx.arc() untuk melukis bulatan. gunakan ctx.globalCompositeOperation = "destination-out" Campurkan dengan elemen pada kanvas untuk mencapai kesan pemadam.

Apa yang perlu diperhatikan di sini ialah kami menggunakan nilai globalCompositeOperation atribut destination-out, yang bermaksud bahawa hanya bahagian grafik yang dilukis pada masa ini yang bertindih dengan grafik sedia ada pada kanvas akan dipadamkan.

Baiklah, kini kami telah melaksanakan fungsi pemadam bulat kanvas. Untuk membolehkan pengguna menggunakan pemadam dengan lebih baik, kami juga boleh menambah beberapa kesan interaktif, seperti memaparkan jejari pemadaman semasa, menukar warna pemadaman, dsb. Pelaksanaan kod lengkap adalah seperti berikut:

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

Salin selepas log masuk

Penerangan kod:

Kami juga menambah pembolehubah eraserRadius untuk menyimpan jejari pemadaman semasa dan pembolehubah eraserColor, Digunakan untuk menyimpan warna padam semasa.
Kami menggunakan elemen <input> dan elemen <div> dalam HTML untuk mencipta saiz pemadam dan pemilih warna di luar kanvas untuk melaraskan saiz dan warna pemadam secara dinamik.
Apabila pengguna menggerakkan tetikus, kami mendapat elemen DOM pemadam melalui document.getElementById() dan menetapkan atribut left dan top mengikut kedudukan tetikus semasa. Dengan cara ini, pengguna boleh melihat apakah jejari pemadaman semasa.
Kami menyembunyikan pemadam apabila pengguna bergerak keluar dari kanvas.
Akhir sekali, kami menetapkan saiz pemadam pada pemuatan halaman secara dinamik.

Ringkasan:

Dengan menggunakan kanvas dan javascript, kami boleh melaksanakan pemadam bulat yang boleh disesuaikan dengan mudah. Pemadam ini boleh digunakan untuk memadam pelbagai grafiti, gambar dan elemen lain, meningkatkan pengalaman interaktif pengguna. Dalam projek sebenar, kami boleh menjalankan pembangunan tersuai mengikut keperluan khusus untuk mencapai kesan yang lebih halus.

Atas ialah kandungan terperinci Javascript melaksanakan pemadam bulatan kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!