HTML - Velocity Draw

Pendahuluan Velocity Draw

Hai, para pengembang web masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia HTML dan sebuah tool kecil yang bagus bernama Velocity Draw. Sebagai guru komputer tetangga yang ramah, saya di sini untuk mengorbit Anda melalui petualangan ini, langkah demi langkah. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita mulai dari nol!

Apa Itu Velocity Draw?

Velocity Draw adalah sebuah aplikasi menggambar berbasis HTML5 canvas yang sederhana namun kuat. Itu memungkinkan pengguna untuk membuat gambar dengan menggerakkan mouse atau jari (pada perangkat sentuh) di atas layar. Bagian yang menarik? Semakin cepat Anda gerakkan, garis semakin tipis!

Menyiapkan Berkas HTML

Mari kita mulai dengan membuat struktur HTML dasar untuk aplikasi Velocity Draw kita. Buka editor teks favorit Anda dan ketik kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// Kita akan menempatkan kode JavaScript kami di sini
</script>
</body>
</html>

Ini membuat dokumen HTML dasar dengan elemen canvas tempat kita akan menggambar, dan tag script tempat kita akan menulis kode JavaScript.

Magia JavaScript: Membuat Canvas Interaktif

Sekarang, mari kita tambahkan beberapa JavaScript untuk membuat canvas kita interaktif. Kita akan memecahnya menjadi beberapa bagian kecil, mudah untuk dimaklum:

1. Menyiapkan canvas

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Di sini, kita mengambil elemen canvas kita, mendapatkan konteks rendering 2D nya (yang kita akan gunakan untuk menggambar), dan menyetel ukurannya untuk mengisi keseluruhan jendela.

2. Melacak gerakan mouse

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Kita menyiapkan beberapa variabel untuk melacak apakah kita sedang menggambar, posisi terakhir mouse, dan kecepatan saat ini. Kemudian kita menambahkan penggunaan event listener untuk aksi mouse.

3. Implementasi fungsi menggambar

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}

Fungsi ini menangani penggambaran. Fungsi draw adalah tempat magia terjadi - itu menghitung kecepatan berdasarkan seberapa jauh mouse telah bergerak dan menyesuaikan lebar garis sesuai nya.

Menggabungkan Semua Bagian

Sekarang kita memiliki semua bagian, mari gabungkannya ke dalam berkas HTML kita:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>

Cara Kerja

Ketika Anda menekan tombol mouse, startDrawing dipanggil, yang mengatur isDrawing ke true dan mencatat posisi awal.
Saat Anda menggerakkan mouse, draw dipanggil berkali-kali. Itu menggambar garis dari posisi terakhir ke posisi saat ini.
Kecepatan dihitung berdasarkan seberapa jauh mouse telah bergerak sejak panggilan terakhir.
Lebar garis diatur sebaliknya proporsional dengan kecepatan - gerakan yang cepat menghasilkan garis yang tipis.
Ketika Anda melepaskan tombol mouse atau menggerakkannya keluar dari canvas, stopDrawing dipanggil, yang menghentikan proses penggambaran.

Kesimpulan

Selamat! Anda baru saja membuat aplikasi Velocity Draw sendiri. Apakah itu menakjubkan bagaimana beberapa baris kode dapat membuat sesuatu yang interaktif dan menyenangkan? Saat Anda bermain dengan alat penggambaran baru Anda, pikirkan bagaimana Anda dapat mengembangkan nya. Anda bisa menambahkan opsi warna? Apa tentang gaya brush yang berbeda?

Ingat, kunci untuk menjadi seorang pemrogram yang hebat adalah eksperimen dan latihan. Jadi jangan berhenti di sini - terus menjelajahi, terus mengoding, dan yang paling penting, terus bersenang-senang!

Metode	Deskripsi
`getElementById`	Mengambil elemen dari DOM berdasarkan ID nya
`getContext`	Mendapatkan konteks rendering untuk canvas
`addEventListener`	Menambahkan penggunaan event handler ke elemen
`beginPath`	Memulai path baru di canvas
`moveTo`	Memindahkan kursor gambar ke titik yang ditentukan
`lineTo`	Menggambar garis dari titik saat ini ke titik yang ditentukan
`stroke`	Menggambar path yang ditentukan dengan gaya stroke saat ini
`Math.sqrt`	Menghitung akar kuadrat dari sebuah bilangan
`Math.pow`	Menghitung pangkat sebuah bilangan
`Math.max`	Mengembalikan bilangan terbesar dari nol atau lebih banyak bilangan

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Dek Meja Slayd Web

Tutorial Seterusnya:

HTML - Kod QR