canvas小球亂撞

admin發表於2018-07-02
Canvas
本章節分享一段程式碼例項，它利用canvas實現了小球亂撞的效果。

想要對canvas有所瞭解的朋友可以自行分析一下程式碼。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
 <style>
 body{
  font-family: 微軟雅黑; 
}
 body,h1{
  margin:0;
}
 canvas{
  display:block;
  margin-left:auto;
  margin-right: auto;
  border:1px solid #DDD; 
  background:-webkit-linear-gradient(top, #222,#111);
} 
</style>
</head>
<body>
<canvas id="canvas" ></canvas>
<button id="stop">stop</button>
<button id="run">run</button>
<button id="addBall">addBall</button>
<script src="jquery-1.6.2.min.js"></script>
<script>
var nimo={
  aniamted:null,
  content:null,
  data:{
    radiusRange:[5,20],
    speedRange:[-5,5],
    scrollHeight:null,
    scrollWdith:null
  },
  balls:[],
  ele:{
    canvas:null
  },
  fn:{
    creatRandom:function(startInt,endInt){//生產隨機數
      var iResult; 
      iResult=startInt+(Math.floor(Math.random()*(endInt-startInt+1)));
      return iResult
    },
    init:function(){
      nimo.data.scrollWdith=document.body.scrollWidth;
      nimo.data.scrollHeight=document.body.scrollHeight;
      nimo.ele.canvas=document.getElementById('canvas'); 
      nimo.content=nimo.ele.canvas.getContext('2d');  
      nimo.ele.canvas.width=nimo.data.scrollWdith-50;
      nimo.ele.canvas.height=nimo.data.scrollHeight-100;
    },
    addBall:function(){
      var aRandomColor=[];
      aRandomColor.push(nimo.fn.creatRandom(0,255));
      aRandomColor.push(nimo.fn.creatRandom(0,255));
      aRandomColor.push(nimo.fn.creatRandom(0,255)); 
      var iRandomRadius=nimo.fn.creatRandom(nimo.data.radiusRange[0],nimo.data.radiusRange[1]);
      var oTempBall={
        coordsX:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.width-iRandomRadius),
        coordsY:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.height-iRandomRadius),
        radius:iRandomRadius,  
        bgColor:'rgba('+aRandomColor[0]+','+aRandomColor[1]+','+aRandomColor[2]+',0.5)' 
      }; 
      oTempBall.speedX=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]);
      if(oTempBall.speedX===0){
        oTempBall.speedX=1
      }
      if(oTempBall.speedY===0){
        oTempBall.speedY=1
      }
      oTempBall.speedY=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]);
      nimo.balls.push(oTempBall)
    },
    drawBall:function(bStatic){  
      var i,iSize;
      nimo.content.clearRect(0,0,nimo.ele.canvas.width,nimo.ele.canvas.height)
      for(var i=0,iSize=nimo.balls.length;i<iSize;i++){
        var oTarger=nimo.balls[i];  
        nimo.content.beginPath();
        nimo.content.arc(oTarger.coordsX,oTarger.coordsY,oTarger.radius,0,10);
        nimo.content.fillStyle=oTarger.bgColor;  
        nimo.content.fill();
        if(!bStatic){
          if(oTarger.coordsX+oTarger.radius>=nimo.ele.canvas.width){
            oTarger.speedX=-(Math.abs(oTarger.speedX))
          }
          if(oTarger.coordsX-oTarger.radius<=0){
            oTarger.speedX=Math.abs(oTarger.speedX)
          }
          if(oTarger.coordsY-oTarger.radius<=0){
            oTarger.speedY=Math.abs(oTarger.speedY)
          }
          if(oTarger.coordsY+oTarger.radius>=nimo.ele.canvas.height){
            oTarger.speedY=-(Math.abs(oTarger.speedY))
          }
          oTarger.coordsX=oTarger.coordsX+oTarger.speedX;
          oTarger.coordsY=oTarger.coordsY+oTarger.speedY;  
        }  
      }
    },
    run:function(){
      nimo.fn.drawBall();
      nimo.aniamted=setTimeout(function(){
        nimo.fn.drawBall();
        nimo.aniamted=setTimeout(arguments.callee,10)
      },10)
    },
    stop:function(){
      clearTimeout(nimo.aniamted)
    }
  }
}
window.onload=function(){
  nimo.fn.init();
  var i;
  for(var i=0;i<10;i++){
    nimo.fn.addBall();
  }
  nimo.fn.run();
  document.getElementById('stop').onclick=function(){
    nimo.fn.stop()
  }
  document.getElementById('run').onclick=function(){
    nimo.fn.stop()
    nimo.fn.run()
  }
  document.getElementById('addBall').onclick=function(){
    var i;
    for(var i=0;i<10;i++){
      nimo.fn.addBall(); 
    }
    nimo.fn.drawBall(true);
  }
}
</script>
</body>
</html>

相關文章