의견 :이 기사에서는 JS 및 HTML5를 사용할 수있는 캔버스 회전 효과의 예를 소개합니다.
keleyi.htm의 코드는 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> HTML 회전 캔버스 </title>
<script type = "text/javaScript"src = "/jQuery-1.10.2.min.js"> </script>
<script type = "text/javaScript"src = "jb51.js"> </script>
</head>
<body>
<canvas> </canvas>
</body>
</html>
JB51.js의 코드는 다음과 같습니다.
/*
* 기능 : 캔버스 회전
*/
(기능(){
var canvas = null,
컨텍스트 = null,
각도 = 0;
함수 resetCanvas () {
canvas = document.getElementById ( "JB51");
canvas.width = window.innerWidth;
canvas.height = window.innerheight;
Context = canvas.getContext ( "2d");
}
기능 애니메이션 () {
context.save ();
노력하다{
// 캔버스를 지우십시오
context.clearRect (0, 0, canvas.width, canvas.height);
// 원점을 설정합니다
context.translate (canvas.width * 0.5, canvas.height * 0.5);
// 회전 각도
context.rotate (각도);
// 채우기 색상을 설정합니다
Context.FillStyle = "#ff0000";
// 사각형을 그립니다
context.fillRect (-30, -30, 60, 60);
각도 += 0.05 * Math.pi;
}
마지막으로{
Context.Restore ();
}
}
$ (Window) .Bind ( "Resize", ResetCanvas) .Bind ( "Reorient", ResetCanvas);
$ (document) .ready (function () {
scrollto (0,1);
ResetCanvas ();
SetInterval (Animate, 40);
});
}) ();