tutorial pengembangan web terbaru
 

HTML <canvas> Tag


Contoh

Menggambar kotak merah, dengan cepat, dan menunjukkan dalam <canvas> elemen:

<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Cobalah sendiri "

Definisi dan Penggunaan

The <canvas> tag digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript).

The <canvas> tag hanya wadah untuk grafis, Anda harus menggunakan script untuk benar-benar menarik grafis.


Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen.

Elemen
<canvas> 4.0 9.0 2.0 3.1 9.0

Perbedaan Antara HTML 4.01 dan HTML5

The <canvas> tag yang baru di HTML5.


Tips dan Catatan

Catatan: Setiap teks dalam <canvas> elemen akan ditampilkan dalam browser yang tidak mendukung <canvas> .

Tip: Pelajari lebih lanjut tentang <canvas> elemen dalam kami HTML Canvas Tutorial .

Tip: Untuk referensi lengkap semua properti dan metode yang dapat digunakan dengan objek kanvas, pergi ke kami HTML Canvas Referensi .


atribut

= Baru di HTML5.

Atribut Nilai Deskripsi
height pixels Menentukan ketinggian kanvas
width pixels Menentukan lebar kanvas

Atribut global

The <canvas> tag juga mendukung Atribut Global di HTML .


Atribut acara

The <canvas> tag juga mendukung Acara Atribut di HTML .


Pengaturan Default CSS

Tidak ada.