Tanda <canvas> HTML

Definisi dan penggunaan

<canvas> Label biasanya digambar secara real-time melalui skrip (biasanya JavaScript).

<canvas> Label adalah transparan, ia hanya wadah grafik, harus menggunakan skrip untuk menggambar grafik secara nyata.

di peramban yang menonaktifkan JavaScript dan yang tidak mendukung <canvas> dalam peramban, akan menampilkan <canvas> teks di dalam elemen.

Petunjuk

Belajar tentang HTML Canvas di <canvas> pengetahuan tentang elemen.

Untuk melihat referensi lengkap semua atribut dan metode, kunjungi Panduan Referensi Canvas HTML.

Instansi

Contoh 1

Garis gambar merah secara real-time dan tunjukkan di dalam elemen <canvas>:

<canvas id="myCanvas">
Peramban Anda tidak mendukung tanda <canvas>.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Coba sendiri

Contoh 2

Contoh <canvas> lainnya:

<canvas id="myCanvas">
Peramban Anda tidak mendukung tanda <canvas>.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Buka kecerahan
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Coba sendiri

Atribut

Atribut Nilai Deskripsi
height Nilai piksel Menentukan tinggi kanvas. Nilai defaultnya adalah 150.
width Nilai piksel Menentukan lebar kanvas. Nilai defaultnya adalah 300.

Atribut global

<canvas> Tanda ini mendukung Atribut global di HTML.

Atribut peristiwa

<canvas> Tanda ini mendukung Atribut peristiwa di HTML.

Pengaturan CSS default

Sebagian besar peramban akan menampilkan nilai default berikut: <canvas> Elemen:

canvas {
  height: 150px;
  width: 300px;
}

Coba sendiri

Sejarah <canvas>

Elemen HTML ini dirancang untuk grafik vektor klien. Dia sendiri tidak memiliki perilaku, tetapi menampilkan API perekam gambar kepada JavaScript klien untuk memungkinkan skrip menaruh apa pun yang ingin diskribut ke atas kanvas.

Tanda <canvas> diperkenalkan oleh Apple di peramban Web Safari 1.3. Alasan ekspansi dasar HTML ini adalah kemampuan pengerajin HTML di Safari yang digunakan juga oleh komponen Dashboard di Mac OS X, dan Apple ingin ada cara untuk mendukung grafik skript di Dashboard.

Firefox 1.5 dan Opera 9 mengikuti pemimpin Safari. Kedua peramban ini mendukung tanda <canvas>.

Kami bahkan dapat menggunakan tanda <canvas> di IE, dan membangun kanvas yang kompatibel berdasarkan dukungan VML di IE menggunakan kode JavaScript sumber terbuka (dipicu oleh Google). Lihat:http://excanvas.sourceforge.net/.

Usaha standarisasi <canvas> dipicu oleh asosiasi tak resmi produsen peramban Web, saat ini <canvas> sudah menjadi tanda resmi dalam rancangan HTML 5. Lihat:http://www.whatwg.org/specs/web-apps/current-work/

Perbedaan antara tanda <canvas> dan SVG serta VML

Salah satu perbedaan penting antara tanda <canvas> dan SVG serta VML adalah, <canvas> memiliki API pengerajin berdasarkan JavaScript, sementara SVG dan VML menggunakan dokumen XML untuk mendeskripsikan pengerajin.

Kedua cara ini secara fungsional sama, setiap cara dapat disimulasikan dengan yang lain. Dari luaran, mereka sangat berbeda, tetapi setiap satu mempunyai kelebihan dan kekurangan. Contohnya, pengerajin SVG mudah diedit, hanya dengan menghapus elemen dari deskripsinya.

Untuk menghapus elemen dari satu gambar <canvas> yang sama, seringkali perlu menghapus pengerajin dan menggambar kembali.

bagaimana cara menggunakan tanda <canvas> untuk pengerajin

Sebagian besar API pengerajin Canvas tidak didefinisikan di elemen <canvas> sendiri, melainkan dijalur melalui metode getContext()dapatkan sebuah objek ' lingkungan pengerajin'.

API Canvas juga menggunakan cara penampakan jalur. Namun, jalur didefinisikan melalui sejumlah pemanggilan metode, bukan dijelaskan sebagai string huruf dan angka, seperti pemanggilan metode beginPath() dan arc().

Setelah definisi jalur disiapkan, metode lainnya, seperti fill(), adalah operasi terhadap jalur ini. Properti berbagai lingkungan pengeritrakan, seperti fillStyle, menjelaskan bagaimana operasi ini digunakan.

Keterangan:Salah satu alasan API Canvas sangat kepadatan adalah ia tidak menyediakan dukungan penulisan teks. Untuk menambahkan teks ke gambar <canvas>, harus menggambar teks sendiri dan gabungkannya dengan gambar bitmap, atau gunakan lokasi CSS positioning di atas <canvas> untuk menutupi teks HTML.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung elemen ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0