如何实现canvas 旋转由快变慢
展开全部
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width:300px; height: 300px;}10 canvas{background: #fff;}11 </style>12 <script type="text/javascript">13 window.onload = function(){14 var c = document.getElementById('myCanvas');15 var context = c.getContext('2d');16 17 //开始绘制矩形18 context.fillStyle = '#f0f';19 context.strokeStyle = 'blue';20 context.fillRect(20,20,100,100);21 context.strokeRect(20,20,100,100);22 context.fill();23 context.stroke();24 25 //保存当前canvas状态26 context.save();
27 28 //绘制另外一个矩形29 context.fillStyle = '#f00';30 context.strokeStyle = 'green';31 context.fillRect(140,20,100,100);32 context.strokeRect(140,20,100,100);33 context.fill();34 context.stroke();35 36 //恢复第一个矩形的状态37 context.restore();38 39 //绘制两个矩形40 context.fillRect(20,140,50,50);41 context.strokeRect(80,140,50,50);42 43 };44 </script>45 </head>46 <body>47 <div id="div1">48 <canvas id="myCanvas" width="300" height="200"></canvas>49 </div>50 </body>51 </html>
27 28 //绘制另外一个矩形29 context.fillStyle = '#f00';30 context.strokeStyle = 'green';31 context.fillRect(140,20,100,100);32 context.strokeRect(140,20,100,100);33 context.fill();34 context.stroke();35 36 //恢复第一个矩形的状态37 context.restore();38 39 //绘制两个矩形40 context.fillRect(20,140,50,50);41 context.strokeRect(80,140,50,50);42 43 };44 </script>45 </head>46 <body>47 <div id="div1">48 <canvas id="myCanvas" width="300" height="200"></canvas>49 </div>50 </body>51 </html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
