HTML5 캔버스 회전 효과 example_html5 튜토리얼 기술

/*
* 함수: 캔버스 회전
*/
(function(){
var canvas=null,
context=null,
angle =0;
함수 ResetCanvas(){
canvas=document.getElementById("jb51");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
context=canvas.getContext(" 2d");
}
function animate(){
context.save();
try{
//캔버스 지우기
context.clearRect (0, 0, canvas.width, canvas.height);
//원점 설정
context.translate(canvas.width * 0.5, canvas.height * 0.5);
//회전 각도
context.rotate(angle) ;
//채우기 색상 설정
context.fillStyle = "#FF0000";
//사각형 그리기
context.fillRect(-30, -30, 60 , 60);
각도 = 0.05 * Math.PI;
}
마침내{
context.restore();
}
}
$(window).bind ("크기 조정",resetCanvas).bind("reorient",resetCanvas);
$(document).ready(function(){
window.scrollTo(0,1);
ResetCanvas();
setInterval(animate,40 );
});
})();