首页 > 代码库 > mycircle

mycircle

2024-07-30 14:15:22   219人阅读

　　预览地址->mycircle

　　应该是最简单的canvas动画的制作，主要难点是画布的旋转，这里要用到save和restore方法。主要思路是画出一个圆，然后旋转画布，递增坐标，产生动的效果。

　　碰撞后的轨迹没有进行计算。

  1 <!DOCTYPE html>  2 <html>  3   <head>  4     <script type="text/javascript">  5       window.onload = function() {  6         var canvas = document.getElementById(‘myCanvas‘);  7         var c = canvas.getContext(‘2d‘);  8   9         var len = 0; 10         var r = 30; 11         var x = []; 12         var y = []; 13         var deg = []; 14         var addx = []; 15         var addy = []; 16         var adddeg = [];     17         var allcolor = []; 18          19         getCircle(); 20         document.getElementById(‘btn‘).addEventListener(‘click‘, getCircle);   21         window.setInterval(function() {gameStart();}, 1); 22  23         function getCircle() { 24           len++; 25           x.push(35); 26           y.push(35); 27           addx.push(1); 28           addy.push(1); 29           adddeg.push(1); 30           deg.push(0); 31           allcolor.push(getGrd()); 32         } 33  34         function gameStart() { 35           c.clearRect(0, 0, 1000, 500); 36           for(var i = 0; i < len; i++) { 37             moving(i); 38           } 39           judge(); 40         } 41  42         function moving(i) { 43           if(x[i] + 35 > 1000 || x[i] - 35 < 0) { 44             addx[i] *= -1,  adddeg[i] *= -1; 45           } 46  47           if(y[i] + 35 > 500 || y[i] - 35 < 0) { 48             addy[i] *= -1, adddeg[i] *= -1; 49           } 50  51           c.save(); 52           c.translate(x[i], y[i]); 53           c.rotate(deg[i] * Math.PI / 180); 54           c.strokeStyle = allcolor[i]; 55           c.beginPath(); 56           c.arc(0, 0, r, 0, Math.PI * 2, true); 57           c.lineWidth = 5; 58           c.stroke(); 59           x[i] += addx[i], y[i] += addy[i], deg[i] += adddeg[i]; 60           c.restore(); 61         } 62  63         function judge() { 64           for(var i = 0; i < len; i++) 65             for(var j = i + 1; j < len; j++) { 66               if(getDis(x[i], y[i], x[j], y[j]) <= r * 2) { 67                 addx[i] *= -1, addy[i] *= -1, adddeg[i] *= -1; 68                 addx[j] *= -1, addy[j] *= -1, adddeg[j] *= -1; 69               } 70             } 71         } 72  73         function getRandomColor() { 74           while(true) { 75             var a = Math.random(); 76             // case 77             if(a < 0.2) continue; 78             var mycolor = ‘#‘ + parseInt(a * 0xffffff).toString(16); 79             return mycolor; 80           } 81         } 82  83         function getGrd() { 84           var grd = c.createLinearGradient(-r, -r, r, r); 85           grd.addColorStop(0, getRandomColor()); 86           grd.addColorStop(0.2, getRandomColor()); 87           grd.addColorStop(0.4, getRandomColor()); 88           grd.addColorStop(0.6, getRandomColor()); 89           grd.addColorStop(0.8, getRandomColor()); 90           grd.addColorStop(1, getRandomColor()); 91           return grd; 92         } 93  94         function getDis(x1, y1, x2, y2) { 95           var res = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2); 96           return Math.sqrt(res); 97         } 98       }; 99     </script>100   </head>101 102   <body>103     <canvas id=‘myCanvas‘ width=1000 height=500 style=‘background-color:black‘>104     </canvas>105     <input type=‘button‘ value=‘add‘ id=‘btn‘ />106   </body>107 </html>

　　这里有几个case要解释。

  • save和restore方法以及translate和rotate方法的应用。将另写一篇说明。&& 第三点
  • 去掉第55行代码，画布将会绘制之前的所有circle。我的理解是，画布在第58行stroke时，因为没有55行的beginPath，画布会自动去寻找，默认找到第一次开始画。所以我觉得最好每次绘图前都加上beginpath以免不必要的错误出现。
  • 去掉第77行代码，报错如下：Uncaught SyntaxError: An invalid or illegal string was specified，寻找后也就是addColorStop的第二个参数异常。这个错误我百思不得，之前加上这行代码是因为怕取色跟黑色太近看不清，没想过语法上的错误，思考后暂时觉得是当random出的数字跟0无限接近时出现的错误。

　　

mycircle


联系
我们