의견 : 회전 작업을 수행하기 전에 하나의 문장을 이해해야합니다. 회전은 그림 자체가 아닌 캔버스의 좌표계입니다. 먼저, 원의 좌표를 이해해 봅시다 : 중심, 시작 각도, 끝 각도; 다음은 매우 간단합니다
회전 작업을 수행하기 전에 하나의 문장을 이해해야합니다. 캔버스의 좌표계는 그림 자체가 아닌 회전됩니다. 좋아,이 문장을 이해 한 후에, 다음은 매우 간단합니다.먼저 원의 좌표를 이해해 봅시다.
<script language = "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, 마지막 매개 변수는 false = clockwise, true = counterclockwise입니다. 물론이 매개 변수는 선택 사항*/입니다.
cxt.fillstyle = "#f00";/*사용할 색상을 선택하십시오*/
cxt.fill ();/*캔버스에 그림을 실제로 그리는 한 단계, 첫 번째 반원을 그립니다*/
/*두 번째 반원을 그리는 것을 선호합니다*/
cxt.beginpath ();
cxt.arc (170,100,50, math.pi*1.25, math.pi*0.25, false);
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 ( "I Love Html5", 0,300);/*두 매개 변수는 첫 번째는 텍스트의 x 축 좌표를 그리기 시작하는 것입니다. 두 번째는 텍스트의 y 좌표를 그리기 시작하는 것입니다*/
cxt.stroke ();
/*그라데이션 생성*/
var grd = cxt.createlineargradient (0,45,175,50);/*4 개의 매개 변수는 구배 시작점 X, y 그라디언트 엔드 포인트 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 ();
</스크립트>
생식 이미지 :