Cara menggunakan gambar kanvas di HTML5

Penulis：Eve Cole Waktu Pembaruan：2025-02-12 02:36:02

1. Apa itu Kanvas

Canvas adalah bagian dari HTML5 dan memungkinkan bahasa skrip untuk merender gambar secara dinamis. Kanvas mendefinisikan suatu area. Lebar dan tinggi area dapat ditentukan oleh atribut HTML. Kode JavaScript dapat mengakses area tersebut dan merender rendering dinamis pada halaman web melalui serangkaian fungsi gambar (API) yang lengkap.

2. Apa yang bisa dilakukan Canvas

Game: Tidak ada keraguan bahwa game memainkan peran penting dalam bidang HTML5. HTML5 lebih tiga dimensi dan lebih canggih dibandingkan Flash dalam hal tampilan gambar berbasis Web.

Produksi grafik: Produksi grafik sering diabaikan oleh orang-orang, namun komunikasi dan kerjasama dalam suatu perusahaan atau antar perusahaan tidak dapat dipisahkan dari grafik. Beberapa pengembang sekarang menggunakan HTML/CSS untuk membuat ikon. Tentu saja, menggunakan SVG (Scalable Vector Graphics) untuk menyelesaikan produksi grafik juga merupakan cara yang sangat baik.

Desain font: Render font khusus akan sepenuhnya berbasis web dan diimplementasikan menggunakan teknologi HTML5.

Editor grafis: Editor grafis dapat 100% berbasis web.

Konten lain yang dapat disematkan di situs web: seperti grafik, audio, video, dan banyak elemen lainnya dapat diintegrasikan dengan lebih baik dengan Web dan tidak memerlukan plug-in apa pun.

3. Penggunaan dasar Canvas

1. Saat menggunakan <canvas>, Anda harus menyetel atribut lebar dan tinggi terlebih dahulu serta menentukan ukuran area yang dapat digambar. Jika Anda hanya menentukan lebar dan tinggi tanpa menambahkan gaya atau gambar gambar, elemen tersebut tidak akan terlihat di halaman .

 <kanvas id='draw' width='200px' height='200px'></kanvas>

2. Untuk menggambar gambar, pertama-tama kita perlu mendapatkan kanvas dan memanggil metode getContext(), lalu memasukkan nama konteks (2D/3D). 2D memiliki dua operasi menggambar dasar | ) |. Nilai default kedua properti ini adalah #000

 var draw = document.getElementById('draw'); //Konfirmasi apakah browser mendukung elemen <canvas> if(draw.getContext){ var konteks = draw.getContext('2d'); konteksnya konteks.strokeStyle = '#f00'; //Warna interior padang rumput yang terisi konteks.fillStyle = '#0f0';}

3. Gunakan metode toDataURL() untuk mengekspor gambar yang digambar pada elemen <canvas>.

 var draw = document.getElementById('draw');if(draw.getContext){ //Tampilkan gambar, toDataURL() mendapat string string base64 var drawURL = draw.toDataURL('image/png') ; = dokumen.createElement('img'); gambar.src = drawURL; dokumen.body.appendChild(gambar }

4. Ada tiga metode utama untuk menggambar persegi panjang. fillRect() adalah warna isian persegi panjang, strokeRect() adalah goresan persegi panjang, dan clearRect() membersihkan persegi panjang. Ketiga metode ini semuanya menerima 4 parameter x/y/w/h, koordinat sudut kiri atas persegi panjang serta lebar dan tinggi.

 var draw = document.getElementById('draw'); //Konfirmasi apakah browser mendukung elemen <canvas> if(draw.getContext){ var konteks = draw.getContext('2d'); garis tepi hijau konteks.fillStyle = '#f00'; konteks.strokeStyle = '#0f0'; konteks.fillRect(10,10,50,50); //Gambar persegi panjang hijau dengan guratan merah konteks.fillStyle = '#0f0'; konteks.strokeStyle = '#f00'; , 50); konteks.isiRect(10,10,50,50); //Kosongkan persegi panjang kecil di mana kedua persegi panjang tersebut tumpang tindih konteks.clearRect(40,40,10,10);}

5. Menggambar jalur. Bentuk dan garis kompleks dapat dibuat melalui jalur. Untuk menggambar jalur, panggil metode BeginPath() terlebih dahulu, lalu gunakan metode berikut untuk menggambar jalur sebenarnya.

arc(x,y,radius,sudut awal,sudut akhir,berlawanan arah jarum jam)

(x, y) koordinat pusat lingkaran, jari-jari, (sudut awal, sudut akhir) sudut awal dan sudut akhir, berlawanan arah jarum jam (salah)/berlawanan arah jarum jam (benar)

moveTo(x,y) memindahkan kursor ke (x,y) tanpa menggambar garis. Dapat digunakan untuk mengubah apa yang disebut koordinat titik sebelumnya*

busurKe(x1,y1,x2,y2,radius)

Gambarlah sebuah kurva yang dimulai dari titik sebelumnya ke (x2, y2) dan melalui (x1, y1) dengan jari-jari yang ditentukan

lineTo(x,y) menarik garis lurus dari titik sebelumnya ke (x,y)

persegi(x,y,lebar,tinggi)

Gambarlah sebuah persegi panjang yang dimulai dari (x, y), dengan lebar dan tinggi sebagai lebar dan tinggi. Metode ini menggambar jalur persegi panjang dan bukan bentuk independen yang digambar oleh strokeRect() dan fillRect()

 //Selanjutnya menggambar jam tanpa angka var draw = document.getElementById('draw');if(draw.getContext){ var konteks = draw.getContext('2d'); //Jalur awal konteks.beginPath( ); /Gambar lingkaran luar konteks.arc(100,100,99,0,2*Math.PI,false); //Gambar lingkaran dalam konteks.moveTo(194,100); ,15) ; //Gambar jarum jam konteks.moveTo(100,100); //jalur guratan konteks.stroke(); konteks.strokeStyle = '#f00' }

gaya teks font, ukuran, font, dll.

 //Gambar jam 12 pada dial konteks.font = 'tebal 12px Arial'; konteks.textAlign = 'tengah'; konteks.textBaseline = 'tengah';

7. Transformasi

memutar(malaikat) memutar radian sudut gambar di sekitar titik asal

scale(scaleX,scaleY) menskalakan gambar, x*scaleX,y*scaleY default ke 1

Translate(x,y) memindahkan titik asal koordinat ke (x,y)

 var draw = document.getElementById('draw'); if(draw.getContext){ var konteks = draw.getContext('2d'); //Memulai jalur konteks.beginPath(); 100,100,99,0,2*Math.PI,false); //Gambarlah konteks lingkaran dalam.moveTo(194,100); konteks.arc(100,100,94,0,2*Math.PI,false); //Transformasi konteks asal.translate(100,100); //Putar konteks jarum menit.rotate(1) //Gambar konteks jarum menit. moveTo(0, 0); konteks.lineTo(0,-85); //Gambar jarum jam konteks.moveTo(0,0); //jalur guratan konteks.stroke(); konteks.strokeStyle = '#f00' }

8. Menggambar gambar, drawImage()

 var img = document.getElementByTagNames('gambar')[0]; konteks.drawImage(img,0,10,50,50,0,100,40,60);

9 parameter: gambar yang akan digambar, gambar asli |x|y|w|h|, gambar target |x|y|w|h|

9. Bayangan dan gradien

Shadow terutama memiliki nilai atribut berikut:

bayanganWarna
shadowOffsetX: offset bayangan sumbu X
shadowOffsetY: offset bayangan sumbu Y
shadowBlur: jumlah piksel buram, default 0, tidak buram

 var konteks = draw.getContext('2d'); //Atur bayangan konteks.bayanganWarna = 'rgba(210,210,210,.5)'; konteks.bayanganOffersetX = '5'; ada empat parameter |x1|y1|x2|y2|. yang merupakan koordinat titik awal dan koordinat titik akhir var gradien = konteks.createLinearGradient(30,30,70,70); gradien.addColorStop(0,'#fff'); //0 berarti gradien awal.addColorStop(1,'#000'); Atribut gradien yang ditentukan konteks.fillStyle = gradien //Masukkan ke dalam gradien saat mengisi konteks.fillRect(30,30,50,50);

Buat gradien radial createRadialGradient(), enam parameter |x1|y2|radius1|x2|y2|radius2| masing-masing adalah pusat dan jari-jari lingkaran pertama serta pusat dan jari-jari lingkaran kedua.

10. Dengan menggunakan data gambar, Anda bisa mendapatkan data gambar asli melalui getImageData(). Empat parameter |x|y|w|h|. Setiap objek ImageData memiliki tiga atribut, lebar/tinggi/data. Data adalah array yang menyimpan data setiap piksel secara internal.

 var imgdata = konteks.getImageData(0,0,100,100); var data = imgdata.data, merah = data[0], hijau = data[1], biru = data[2], alpha = data[3]; Filter abu-abu var draw = document.getElementById('draw'); if(draw.getContext){ var konteks = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //Gambar konteks gambar asli.drawImage(img,0,0,100,100); Dapatkan data Gambar imageData = konteks.getImageData(0,0,img.width,img.height); for(i=0,len=data.length;i<len;i+=4){ merah = data[i]; hijau = data[i+1]; biru = data[i+2]; i+3]; //Hitung rata-rata rgb rata-rata = Math.floor((merah+hijau+biru)/3); //Tetapkan nilai warna data[i] = rata-rata; ; data[i+2] = rata-rata; } imageData.data = data; //Gambar data pada konteks kanvas.putImageData(imageData,0,0)}

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.