Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

68 #DC143C;"></canvas> yang mana untuk settingan garis canvas langsung kita setting pada tag <canvas>. Kita gunakan garis warna merah dengan ketebalan 3px dan canvas ini berukuran 300 x 300. Kita masuk pada bagian alat untuk melukis pada canvas, yaitu javascrip. Pada bagian awal gunakan window.onload=(function(){..} dimana ketika program kita run maka proses yang ada pada fungsi akan dieksekusi. Didalam fungsi kita mulai terlebih dahulu memilih canvas yang akan digunakan dengan var canvas = document.getElementById ("canvas"); dan var ctx = canvas.getContext("2d");. Kemudian kita juga gunakan var cw=canvas.width; dan var ch=canvas.height; untuk menyimpan ukuran tinggi serta lebar dari canvas yang digunakan. Selanjutnya kita akan menyediakan warna dari garis dan isinya dengan menggunakan ctx.strokeStyle='black'; dan ctx.fillStyle='green';. Jadi code ini nantinya akan memberikan warna garis pinggir hitam serta isinya berwarna hijau. Pada contoh program warna yang disediakan akan digunakan untuk lingkaran. Tambahkan ctx.lineWidth=3; untuk ketebalan dari garisnya. Karna contoh ini menggunakan lingkaran maka kita butuh mengatur terlebih dahulu nilai PI dengan inisialisai var PI=Math.PI; yang mana akan kita gunakan untuk menentukan isian dari lingkaran dengan code var fullCircle=PI*2;. Pada bagian ini kita juga sediakan variable var sa=-PI/2; yang berguna untuk memperlihatkan gerakkan

RkJQdWJsaXNoZXIy MTM3NDc5MQ==