Html5画布操作-旋转 | rotate()_综合

  
  
  
  <!DOCTYPE HTML>
<html>
<head>
    <title>旋转</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

 var ctx = document.getElementById('canvas').getContext('2d');

 var canvasRadian = 0;
 var stepRadian = 15 * Math.PI / 180;

 function drawIt() {
     
 if (canvasRadian == 0)
 ctx.strokeRect(360, 0, 20, 60);

 canvasRadian  = stepRadian;

 /*
 * context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度，顺时针为正值，逆时针为负值
 * radian - 弧度值
 */
 ctx.strokeStyle = "blue";
 ctx.rotate(stepRadian);
 ctx.strokeRect(360, 0, 20, 60);
 }

 function clearIt() {
     
 ctx.rotate(-canvasRadian);
 canvasRadian = 0;
 ctx.strokeStyle = "black";

 ctx.clearRect(0, 0, 400, 400);
 }

 </script>
</body>
</html> 
 