8-12 canvas专题-阶段练习一（上）
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>8-12 课堂演示</title>
6 </head>
7 <style type="text/css">
8
9 </style>
10 <body>
11 <canvas id="canvas" width="800" height="600" style="background: #A9A9A9">
12 很抱歉，您的浏览器暂不支持HTML5的canvas
13 </canvas>
14 <script>
15 var c=document.getElementById("canvas");
16 var ctx=c.getContext("2d");
17 ctx.lineWidth=5;
18 ctx.strokeStyle="orange";
19 ctx.fillStyle="red";
20 var i=0;
21 function rotRect(){
22 i++
23 ctx.save()
24 ctx.clearRect(0,0,c.width,c.height)
25 ctx.translate(c.width/2,c.height/2);
26 ctx.rotate(i*15*Math.PI/180)
27 ctx.strokeRect(0,0,100,100)
28 ctx.fillRect(0,0,100,100)
29 ctx.restore()
30 }
31
32 setInterval('rotRect()',500)
33 </script>
34 </body>
35 </html>
