微信扫一扫打赏支持

8-13 canvas专题-阶段练习二（下)

8-13 canvas专题-阶段练习二（下)

 

 

 

 

 

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8-13 课堂演示</title>
 6 </head>
 7 <style type="text/css">
 8 
 9 </style>
10 <body>
11     <canvas id="canvas" width="800" height="600" >
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         var j=100;
22         var step=-1;
23         function rotRect(){
24             i++
25             if(j==200){
26                 step=-1
27             }else if(j==1){
28                 step=1
29             }
30             j+=step;
31             ctx.save()
32             ctx.clearRect(0,0,c.width,c.height)
33             ctx.scale(j/100,j/100);
34             ctx.translate(c.width/2,c.height/2);
35             ctx.rotate(i*15*Math.PI/180)
36             ctx.translate(-50,-50);
37             ctx.strokeRect(0,0,100,100)
38             ctx.fillRect(0,0,100,100)
39             ctx.restore()
40         }
41 
42         setInterval('rotRect()',10)
43     </script>
44 </body>
45 </html>

 

posted @ 2017-12-24 15:42  范仁义  阅读(500)  评论(0)    收藏  举报