Canvas adalah elemen dalam HTML5 yang memungkinkan kita menggambar grafik secara dinamis melalui JavaScript. Dengan Canvas, Anda dapat membuat berbagai macam aplikasi grafis, seperti aplikasi menggambar atau bahkan permainan sederhana. Pada tutorial ini kita akan membuat aplikasi menggambar menggunakan elemen Canvas.
Siapkan HTML
Pertama, buat file HTML yang menyiapkan struktur dasar aplikasi. Berikut adalah kode yang digunakan untuk mengatur elemen Canvas:
html
Salin kode
<!DOCTYPEhtml>
<htmllang=”zh”>
<kepala>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=lebar perangkat, skala awal=1.0″>
<title>Aplikasi menggambar</title>
<gaya>
tubuh {
keluarga font: Arial, sans-serif;
tampilan: fleksibel;
justify-content: tengah;
menyelaraskan-item: tengah;
tinggi: 100vh;
margin: 0;
warna latar belakang: #f0f0f0; }
kanvas {
batas: 1 piksel padat #000;
kursor: garis bidik; }
</gaya>
</kepala>
<tubuh>
<kanvas id=”drawCanvas” width=”500″ height=”500″></canvas>
<skrip src=”app.js”></skrip>
</tubuh>
</html>
Dalam kode ini kami menggunakan<kanvas>Elemen dengan IDmelintasi Kanvas, dan atur ukuran Canvas menjadi 500×500 piksel.
Tambahkan JavaScript
Selanjutnya, buat file JavaScript (mis.aplikasi.js) untuk menambahkan logika gambar. Dalam file ini kita akan membuat fungsi menggambar dengan klik atau gerakan mouse.
Salin kode
const kanvas = dokumen.getElementById(‘drawCanvas’);
const ctx = kanvas.getContext(‘2d’);
biarkan gambar = salah;
kanvas.addEventListener(‘mousedown’, (e) => {
gambar = benar;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});
kanvas.addEventListener(‘mousemove’, (e) => {
jika (menggambar) {
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
});
kanvas.addEventListener(‘mouseup’, () => {
gambar = salah;
});
kanvas.addEventListener(‘mouseout’, () => {
gambar = salah;
});
Dalam kode di atas:
Turunkan mouse Event ini digunakan untuk mulai menggambar dan dipicu ketika mouse diklik.
Mouseup Dan keluar dari mouse Event digunakan untuk berhenti menggambar ketika mouse dilepas atau mouse meninggalkan Canvas.
Tambahkan Fungsi Warna dan Lebar Garis
Untuk membuat aplikasi gambar lebih menarik, kita dapat menambahkan kemampuan pemilihan warna dan lebar garis. Tambahkan kode HTML untuk pilihan warna dan lebar garis pengguna:
html
Salin kode
<label for=”color”>Pilih warna:</label>
<masukan tipe=”warna” id=”warna” nilai=”#000000″>
<label for=”lineWidth”>Pilih lebar garis:</label>
<input type=”range” id=”lineWidth” min=”1″ max=”10″ value=”1″>
Kemudian, ubah kode JavaScript untuk mendapatkan nilai warna dan lebar garis yang dimasukkan pengguna:
Salin kode
const colorInput = dokumen.getElementById(‘warna’);
const lineWidthInput = dokumen.getElementById(‘lineWidth’);
ctx.strokeStyle = colorInput.nilai;
ctx.lineWidth = lineWidthInput.nilai;
colorInput.addEventListener(‘masukan’, () => {
ctx.strokeStyle = colorInput.nilai;
});
lineWidthInput.addEventListener(‘input’, () => {
ctx.lineWidth = lineWidthInput.nilai;
});
Kesimpulan
Melalui langkah-langkah di atas, Anda dapat membuat aplikasi menggambar sederhana menggunakan HTML5 Canvas dan JavaScript. Anda dapat memperluas aplikasi ini lebih lanjut dengan menambahkan fungsi seperti menghapus grafik atau menyimpan hasil gambar ke file. Aplikasi ini mendemonstrasikan bagaimana elemen HTML dan JavaScript berinteraksi untuk menciptakan aplikasi interaktif yang menyenangkan.
