Rumah > Artikel > hujung hadapan web > Javascript melaksanakan pemadam bulatan kanvas

Javascript melaksanakan pemadam bulatan kanvas

王林asal: 2023-05-17 15:17:071177semak imbas

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>

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

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

Penerangan kod:

Kami juga menambah pembolehubah eraserRadius untuk menyimpan jejari pemadaman semasa dan pembolehubah eraserColor, Digunakan untuk menyimpan warna padam semasa.
Kami menggunakan elemen d5fd7aea971a85678ba271703566ebfd dan elemen dc6dce4a544fdca2df29d5ac0ea9906b 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!

JavaScript html 事件 dom 选择器 canvas input 鼠标事件

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：pelayar web wtl pengendalian ralat javascriptArtikel seterusnya：pelayar web wtl pengendalian ralat javascript

Artikel berkaitan

Lihat lagi