html5의 캔버스 - 그래픽 예제 코드 + 효과 다이어그램을 그리며 회전합니다.

의견 : 회전 작업을 수행하기 전에 하나의 문장을 이해해야합니다. 회전은 그림 자체가 아닌 캔버스의 좌표계입니다. 먼저, 원의 좌표를 이해해 봅시다 : 중심, 시작 각도, 끝 각도; 다음은 매우 간단합니다

먼저 원의 좌표를 이해해 봅시다.

<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 ();

</스크립트>

생식 이미지 :