<!DOCTYPE html>
<html lang="ko">
<head>
<title>Canvas의 rotate() 함수</title>
<meta charset="utf-8">
<style type="text/css">
canvas { border:1px solid red; }
</style>
<script type="text/javascript">
// Page_Load 이벤트 잡기
window.addEventListener('load', function () {
// 컨텍스트 개체 가져오기
var ctx = document.querySelector('canvas').getContext('2d');
// 기본 오프셋 변경
ctx.translate(200, 200);
// 개체 회전
ctx.rotate( (Math.PI / 180) * 45 ); // 45도 회전
// 사각형 그리기
ctx.fillStyle = "rgba(0, 128, 255, 0.5)";
ctx.fillRect(10, 0, 150, 50);
}, false);
</script>
</head>
<body>
<canvas width="640" height="480"></canvas>
</body>
</html>
IE9에서의 실행 결과:
