ความคิดเห็น: ก่อนที่จะดำเนินการหมุนคุณต้องเข้าใจหนึ่งประโยค: การหมุนเป็นระบบพิกัดของผืนผ้าใบมากกว่าตัวเอง ก่อนอื่นให้เข้าใจพิกัดของวงกลม: กึ่งกลางมุมเริ่มต้นมุมสิ้นสุด อันต่อไปนั้นง่ายมาก
ก่อนที่จะทำการหมุนคุณต้องเข้าใจหนึ่งประโยค: ระบบพิกัดของผืนผ้าใบหมุนได้แทนที่จะเป็นตัวเลข โอเคหลังจากเข้าใจประโยคนี้สิ่งต่อไปนั้นง่ายมากก่อนอื่นให้เข้าใจพิกัดของวงกลม:
<ภาษาสคริปต์ = "JavaScript">
var cxt = document.getElementById ('demo'). getContext ("2d");
cxt.beginpath ();
cxt.arc (100,100,50, math.pi*0.75, math.pi*1.75, false);/*วาดส่วนโค้งครึ่งวงกลมด้วยพิกัดกลาง 100,100; เรเดียนเริ่มต้นคือ 0.75 เรเดียนปลายคือ 1.75, พารามิเตอร์สุดท้ายเท็จ = ตามเข็มนาฬิกา, จริง = ทวนเข็มนาฬิกาแน่นอนพารามิเตอร์นี้เป็นตัวเลือก*//
cxt.fillstyle = "#f00";/*เลือกสีที่จะใช้*/
cxt.fill ();/*หนึ่งขั้นตอนในการวาดรูปบนผืนผ้าใบจริงๆวาดรูปครึ่งวงกลมแรก*/
/*ชอบวาดรูปครึ่งวงกลมที่สอง*/
cxt.beginpath ();
cxt.arc (170,100,50, math.pi*1.25, math.pi*0.25, เท็จ);
cxt.fillstyle = "#f00";
cxt.fill ();/*วาดกราฟิกวาดบนผืนผ้าใบ*/
cxt.beginpath ();
/*หมุนผืนผ้าใบตามเข็มนาฬิกา 45 องศา พารามิเตอร์ของฟังก์ชันการหมุนคือเรเดียนดังนั้นคุณต้องแปลง *//
cxt.rotate (45*math.pi/180);
CXT.FillRect (141.1, -50,100,100);/*พิกัดเริ่มต้นคือ 141.1, -50 และความกว้างและความสูงคือ 100*/
cxt.fillstyle = "#f00";
cxt.fill ();
cxt.beginpath ();
/*หมุนผืนผ้าใบเป็นมุมปกติ*/
cxt.rotate (-45*math.pi/180);
cxt.font = "60px microsoft yahei";
cxt.strokestyle = "#f00";
cxt.stroketext ("ฉันรัก html5", 0,300);/*พารามิเตอร์สองตัวแรกคือการเริ่มวาดพิกัดแกน x ของข้อความและที่สองคือการเริ่มวาดภาพ y ของข้อความ*//
cxt.stroke ();
/*สร้างการไล่ระดับสี*/
var grd = cxt.createlineargradient (0,45,175,50);/*พารามิเตอร์สี่ตัวคือจุดเริ่มต้นการไล่ระดับสี x, จุดสิ้นสุดการไล่ระดับสี 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);/*พารามิเตอร์สองตัวแรกคือการเริ่มวาดพิกัดแกน x ของข้อความและที่สองคือการเริ่มวาดภาพ y ของข้อความ*//
cxt.stroke ();
</script>
ภาพการทำซ้ำ: