Komentar: Ada dua bentuk, satu adalah stroke (isi) dan yang lainnya mengisi (stroke). Kode implementasi spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Pertama, tempatkan elemen kanvas di halaman HTML, di mana elemen kanvas harus memiliki tiga ID atribut, lebar, dan tinggi.<Canvas> </an Canvas>
Dapatkan objek Canvas dan dapatkan konteks var cxt = document.geteLementById ('demo'). GetContext (2D); di mana parameter 2D bersifat deterministik.
Ketika Anda mulai menggambar, ada dua bentuk, satu stroke dan yang lainnya adalah stroke.
Kode JavaScript:
<bahasa skrip = "javascript">
var cxt = document.geteLementById ('demo'). getContext ("2d");
cxt.beginpath ();
cxt.fillstyle = "#f00";/*Set Fill Color*/
cxt.fillrect (0,0,200,100);/* Gambar persegi panjang, dua parameter pertama menentukan posisi awal, dua yang terakhir adalah lebar dan tinggi dari persegi panjang masing -masing*/
cxt.beginpath ();
cxt.strokestyle = "#000";/*Set Border*/
cxt.linewidth = 3;/*lebar perbatasan*/
cxt.strokerect (0,120.200.100);
cxt.beginpath ();
cxt.moveto (0,350);
cxt.lineto (100.250);
cxt.lineto (200.300);
cxt.closePath ();/*langkah opsional, tutup jalur yang ditarik*/
cxt.stroke ();
</script>
Gambar reproduksi: