HTML5 menggunakan kanvas untuk melukis bulatan berongga dan bulatan pepejal_html5 kemahiran tutorial

Apa yang saya kongsikan dengan anda di sini ialah latihan melukis bulatan berongga dan bulatan pepejal yang saya lakukan semasa saya belajar kanvas.

Salin kod

Kod adalah seperti berikut:

var canvas=document.getElementById("canvas");
var cxt= canvas.getContext("2d");
//Lukis bulatan berongga
cxt.beginPath();
cxt.arc(200,200,50,0,360,false);
cxt .lineWidth= 5;
cxt.strokeStyle="green";
cxt.stroke();//Lukis bulatan berongga
cxt.closePath();
//Lukis bulatan pepejal
cxt. beginPath();
cxt.arc(200,100,50,0,360,false);
cxt.fillStyle="red";//Isi warna, lalai ialah hitam
cxt.fill ();// Lukis bulatan pepejal
cxt.closePath();
//Gabungan berongga dan pepejal
cxt.beginPath();
cxt.arc(300,300,50,0,360, false);
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="green";
cct.stroke();
cxt.closePath( );