Tanda <canvas> HTML

Definisi dan penggunaan

<canvas> Label biasanya digambar secara langsung melalui skrip (biasanya JavaScript).

<canvas> Label adalah transparan, ia hanya wadah grafik, perlu menggunakan skrip untuk menggambar grafik sebenarnya.

di pelayar yang mematikan JavaScript dan yang tidak mendukung <canvas> pelayar, akan menampilkan <canvas> Teks yang ada di dalam elemen.

Petunjuk

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

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

Contoh

Contoh 1

Gambar segera sebuah persegi panjang merah dan tunjukkan di dalam elemen <canvas>:

<canvas id="myCanvas">
Pelayar 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 lain <canvas>:

<canvas id="myCanvas">
Pelayar 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 pereka. Nilai baku adalah 150.
width Nilai piksel Menentukan lebar pereka. Nilai baku adalah 300.

Atribut global

<canvas> Tanda ini mendukung Atribut global di HTML.

Atribut peristiwa

<canvas> Tanda ini mendukung Atribut peristiwa di HTML.

Pengaturan CSS baku

Sebagian besar pelayar akan menampilkan nilai baku berikut ini <canvas> Elemen:

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

Coba sendiri

Sejarah <canvas>

Elemen HTML ini dirancang untuk grafik vektor penggunaan klien. Dia sendiri tidak mempunyai perilaku, tetapi menunjukkan API pereka kepada JavaScript penggunaan klien untuk membuat skrip dapat menggambar apa pun yang diinginkan ke atas latar belakang pereka.

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

Firefox 1.5 dan Opera 9 mengikuti kepedulian 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 yang berlisensi bebas (dipicu oleh Google). Lihat:http://excanvas.sourceforge.net/.

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

Perbedaan antara tanda <canvas> dengan SVG dan VML

Perbedaan yang penting antara tanda <canvas> dengan SVG dan VML adalah, <canvas> memiliki API perekaan berdasarkan JavaScript, sedangkan SVG dan VML menggunakan dokumen XML untuk mendeskripsikan perekaan.

Kedua cara ini secara fungsional adalah setara, setiap cara dapat digantikan dengan yang lain. Dari sisi ekspresi, mereka sangat berbeda, tetapi setiap cara memiliki kelebihan dan kekurangan. Contohnya, perekaan SVG mudah diedit, cukup menghapus elemen dari penjelasannya.

Untuk menghapus elemen dari satu perekaan <canvas> yang sama, sering kali perlu menghapus perekaan lama dan menggambar kembali.

Cara untuk menggunakan tanda <canvas> untuk perekaan.

Sebagian besar API perekaan Canvas tidak didefinisikan di dalam elemen <canvas> sendiri, melainkan dijalur yang melewati. metode getContext()di atas objek lingkungan perekaan yang didapatkan.

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

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

浏览器支持

表中的数字注明了首个完全支持该元素的浏览器版本。

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