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

最新推荐文章于 2019-05-06 16:28:40 发布

weixin_30732825

最新推荐文章于 2019-05-06 16:28:40 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Renyi-Fan/p/8098206.html

本文提供了一个HTML5 Canvas技术实现的旋转矩形示例，通过JavaScript控制Canvas元素，展示如何绘制并动态旋转一个橙色边框、红色填充的矩形。此示例适用于学习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>