Kanvas HTML5

 <Canvas ID = myCanvas width = 400 tinggi = 200>

Canvas default <an Canvas> menampilkan persegi panjang tanpa batas pada halaman. Untuk membuatnya menampilkan kontur, tambahkan bezel putus -putus ke dalamnya dengan mendefinisikan aturan gaya:

 Canvas {border: 1px putus -putus hitam;}

Untuk menyelesaikan tugas menggambar, pertama -tama, kita harus mendapatkan objek <an Canvas>, dan kemudian memperoleh konteks gambar dua dimensi.

Demonstrasi sampel berikut diperoleh dengan gambar gambar saat halaman dimuat:

 <script> window.onload = function () {var canvas = document.geteLementById (myCanvas);

(1) Titik awal adalah (50,50) di bawah (50,50), dan titik akhir adalah (150.150) garis garis lurus

 Context.moveto (50, 50);

(2) Atur lebar dan warna garis dengan atribut linewidth dan strokestyle

 // Line Width Context.linewidth = 10; 50);

(3) Atur bentuk kedua ujung garis (tipe kepala garis) dengan properti Linecap:

1. Butt: fangtou (nilai default)
2. Bulat: Kepala bulat
3. Square: Memperluas kepala persegi (efeknya mirip dengan pantat, tetapi panjang dua garis garis akan meningkatkan panjang setengah dari lebar garis)

 var canvas. Document.getElementById (myCanvas); Side Tore Context.moveto (50, 50); ; Context.linecap = Square;

Contoh di atas dapat melihat bahwa setiap kali segmen garis baru ditarik, metode beginpath () dipanggil.

Tanpa langkah ini, setiap kali Anda menelepon stroke (), Anda akan men -twraw segmen baris asli di kanvas. Terutama seperti contoh di atas, atribut konteks harus dimodifikasi saat menggambar garis baru.