HTML5's Canvas - Contoh Grafis Kode + Diagram Efek Untuk Menggambar Busur dan Putar

Komentar: Sebelum melakukan operasi rotasi, Anda harus memahami satu kalimat: rotasi adalah sistem koordinat kanvas daripada sosok itu sendiri. Pertama, mari kita pahami koordinat lingkaran: pusat, sudut awal, sudut ujung; yang berikutnya sangat sederhana

Pertama, mari kita pahami koordinat lingkaran:

<bahasa skrip = "javascript">

var cxt = document.geteLementById ('demo'). getContext ("2d");

cxt.beginpath ();

cxt.arc (100.100,50, Math.pi*0,75, Math.pi*1.75, false);/*Gambar busur setengah lingkaran dengan koordinat tengah 100.100; Radian awal adalah 0,75, radian akhir adalah 1,75, parameter terakhir false = searah jarum jam, true = berlawanan arah jarum jam, tentu saja, parameter ini opsional*//

cxt.fillstyle = "#f00";/*Pilih warna yang digunakan*/

cxt.fill ();/*satu langkah untuk benar -benar menggambar sosok di kanvas, gambar setengah lingkaran pertama*/

/*Lebih suka menggambar setengah lingkaran kedua*/

cxt.beginpath ();

cxt.arc (170.100,50, Math.pi*1.25, Math.pi*0.25, false);

cxt.fillstyle = "#f00";

cxt.fill ();/*Gambar grafik yang ditarik di kanvas*/

cxt.beginpath ();

/*Putar kanvas searah jarum jam dengan 45 derajat. Parameter fungsi putar adalah radian, jadi Anda perlu mengonversinya */

cxt.rotate (45*Math.pi/180);

cxt.fillrect (141.1, -50.100.100);/*Koordinat awal adalah 141.1, -50, dan lebar dan tinggi adalah 100*/

cxt.fillstyle = "#f00";

cxt.fill ();

cxt.beginpath ();

/*Putar kanvas ke sudut normal*/

cxt.rotate (-45*Math.pi/180);

cxt.font = "60px Microsoft Yahei";

cxt.strokestyle = "#f00";

cxt.stroketext ("I Love html5", 0,300);/*dua parameter, yang pertama adalah mulai menggambar koordinat sumbu x dari teks, dan yang kedua adalah mulai menggambar koordinat Y dari teks*/

cxt.stroke ();

/*Buat gradien*/

var grd = cxt.createLineArgradient (0,45,175,50);/*Empat parameter adalah titik awal gradien x, y titik akhir gradien x, y*/

grd.addcolorstop (0, "#ff0000");

grd.addcolorstop (0,25, "#ffff00");

grd.addcolorstop (0,5, "#00ff00");

grd.addcolorstop (0,75, "#00ffff");

grd.addcolorstop (1, "#ffff00");

cxt.strokestyle = grd;

cxt.stroketext ("I Love Canvas", 0,400);/*Dua parameter, yang pertama adalah mulai menggambar koordinat sumbu x teks, dan yang kedua adalah mulai menggambar koordinat-y teks*/

cxt.stroke ();

</script>

Gambar reproduksi: