회전 작업을 하기 전에 먼저 한 문장을 이해해야 합니다. 회전하는 것은 그래픽 자체가 아니라 캔버스의 좌표계입니다. 자, 이 문장을 이해하고 나면 다음 단계는 매우 간단합니다. 먼저 원을 그리는 좌표를 알아보세요: 코드 복사 코드는 다음과 같습니다. <br>var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); <br>cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*반원호를 그립니다. 중심 좌표는 100,100입니다. , 끝 라디안은 1.75, 마지막 매개변수 False = 시계 방향, true = 시계 반대 방향, 물론 이 매개변수는 선택 사항입니다*/ <br>cxt.fillStyle="#F00";/*사용할 색상을 선택하세요*/ <br>cxt.fill();/ *캔버스에 실제로 그래픽을 그리는 첫 번째 단계는 첫 번째 반원을 그리는 것입니다*/ <br>/*같은 방법으로 두 번째 반원을 그립니다*/ <br>cxt.beginPath (); <br>cxt.arc(170,100, 50,Math.PI*1.25,Math.PI*0.25,false) <br>cxt.fillStyle="#F00" <br>cxt.fill(); /*그려진 그래픽을 캔버스에 그립니다*/ <br>cxt.beginPath(); <br>/*캔버스를 시계방향으로 45도 회전합니다. 회전 함수의 매개변수는 라디안이므로 변환이 필요합니다*/ <br>cxt.rotate(45*Math.PI/180) ; <br>cxt.fillRect(141.1,-50,100,100);/*시작 좌표는 141.1,-50, 너비와 높이는 100*/ <br>cxt .fillStyle="#F00"; <br>cxt.fill (); <br>cxt.beginPath(); <br>/*캔버스를 일반 각도로 회전*/ <br>cxt.rotate(-45* Math.PI/180); <br>cxt.font= "60px Microsoft Yahei"; <br>cxt.StrokeStyle="#f00"; <br>cxt.스트로크텍스트("나는 html5를 좋아합니다",0,300);/* 두 개의 매개변수 중 첫 번째는 텍스트 그리기를 시작하는 x 축 좌표이고, 두 번째 매개변수는 텍스트 그리기를 시작하는 Y 좌표입니다. grd=cxt.createLinearGradient(0,45,175,50); /*4개의 매개변수는 그라데이션 시작점 x, y 그라데이션 끝점 x, y*/ <br>grd.addColorStop(0,"#FF0000") <br>grd.addColorStop(0.25,"#FFFF00") ; <br>grd.addColorStop(0.5,"#00FF00"); <br>grd.addColorStop(0.75,"#00FFFF") <br>grd.addColorStop (1,"#FFFF00"); <br>cxt .StrokeStyle=grd; <br>cxt.스트로크텍스트("I love canvas",0,400);/*두 개의 매개변수, 첫 번째는 그리기 시작을 위한 x축 좌표입니다. 두 번째는 텍스트 그리기를 시작하는 Y 좌표입니다* / <br><br>렌더링:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
