keleyi.htm의 코드는 다음과 같습니다. 코드 복사코드는 다음과 같습니다. html 캔버스 회전< /script><br> </head><br><body><br><canvas id="jb51"></canvas><br></body><br></ html><br> </div> <p>jb51.js의 코드는 다음과 같습니다. <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode53'));"><u>코드 복사</u></span></div>코드는 다음과 같습니다.</div> <div class="msgborder" id="phpcode53"> <br>/*<br>* 함수: 캔버스 회전<br>*/<br>(function(){<br> var canvas=null,<br> context=null,<br> angle =0;<br> 함수 ResetCanvas(){<br> canvas=document.getElementById("jb51");<br> canvas.width=window.innerWidth;<br> canvas.height=window.innerHeight;<br> context=canvas.getContext(" 2d");<br> }<br> function animate(){<br> context.save();<br> try{<br> //캔버스 지우기<br> context.clearRect (0, 0, canvas.width, canvas.height);<br> //원점 설정<br> context.translate(canvas.width * 0.5, canvas.height * 0.5);<br> //회전 각도<br> context.rotate(angle) ;<br> //채우기 색상 설정<br> context.fillStyle = "#FF0000";<br> //사각형 그리기<br> context.fillRect(-30, -30, 60 , 60);<br> 각도 = 0.05 * Math.PI;<br> }<br> 마침내{<br> context.restore();<br> }<br> }<br> $(window).bind ("크기 조정",resetCanvas).bind("reorient",resetCanvas);<br> $(document).ready(function(){<br> window.scrollTo(0,1);<br> ResetCanvas(); <br> setInterval(animate,40 );<br> });<br>})();<br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
