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
Sebelum melakukan operasi rotasi, Anda harus memahami satu kalimat: sistem koordinat kanvas diputar daripada gambar itu sendiri. Oke, setelah memahami kalimat ini, hal 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: