您的位置: 首页  >  文章  >  小球碰撞

小球碰撞

分类: 文章 • 2024-11-09 09:25:34

效果截图

小球碰撞


demo.html

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>canvas</title>  
  6. <script>  
  7.   // 结合setInterval制作动画  
  8.   
  9.   // 基本原理就是定时清除整个canvas重新绘制  
  10.   
  11.   // 小球在矩形区域移动，碰到矩形区域的边缘反弹  
  12.   
  13.     function draw() {  
  14.     var canvas = document.getElementById("mycanvas");  
  15.     if (canvas == null)  
  16.      return false;  
  17.   
  18.     var context = canvas.getContext("2d");  
  19.   
  20.     var interal = setInterval(function () {  
  21.        move(context);  
  22.      }, 1);  
  23.     }         
  24.   
  25.   var x = 100;  //矩形开始坐标  
  26.   var y = 100;  //矩形结束坐标  
  27.   var mx = 0;   //0右1左  
  28.   var my = 0;   //0下1上  
  29.   var ml = 1;   //每次移动长度  
  30.   var r = 20;   //小球半径  
  31.   var cw = 400; //canvas宽度  
  32.   var ch = 300; //canvas高度  
  33.   
  34.   
  35.   function move(context) {  
  36.        context.clearRect(0, 0, 400, 300);  
  37.          
  38.       context.fillStyle = "#EEEEFF";  
  39.       context.fillRect(0, 0, 400, 300);  
  40.       context.fillStyle = "blue";  
  41.   
  42.       context.beginPath();  
  43.       context.arc(x,y,r, 0, Math.PI * 2,true);  
  44.       context.fillStyle = 'rgba(255,0,0,0.8)';  
  45.       context.closePath();  
  46.       context.fill();     
  47.   
  48.       if (mx == 0) {  
  49.           x = x + ml;  
  50.           if (x >= cw-r) {  
  51.               mx = 1;  
  52.           }  
  53.       }  
  54.       else {  
  55.           x = x - ml;  
  56.           if (x <= 20) {  
  57.               mx = 0;  
  58.           }  
  59.       }  
  60.       if (my == 0) {  
  61.           y = y + ml;  
  62.           if (y >= ch-r) {  
  63.               my = 1;  
  64.           }  
  65.       }  
  66.       else {  
  67.           y = y - ml;  
  68.           if (y <= 20) {  
  69.               my = 0;  
  70.           }  
  71.       }  
  72.       
  73.   }   
  74.   
  75.     window.onload=draw;  
  76. </script>  
  77. </head>  
  78. <body>  
  79.   <p id="p1"></p>  
  80.   <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas>  
  81. </body>  
  82. </html>  

相关推荐