H5 canvas 小demo之小球的随机运动

1:结构之html----balls.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link href="style.css" rel="stylesheet" type="text/css"/>
 7     <script type="text/javascript" src="main.js"></script>
 8 </head>
 9 <body>
10 <div id="container">
11     <canvas id="canvas"></canvas>
12     <div id="controller">
13         <h2>canvas控件</h2>
14         <a href="javascript:void(0);" id="motion"></a>
15         <a href="javascript:void(0);" id="white">white</a>
16         <a href="javascript:void(0);" id="black">black</a>
17     </div>
18 
19 </div>
20 
21 </body>
22 </html>

2:样式之css-----style.css

 1 #container{
 2     800px;
 3     height:600px;
 4     margin: 10px auto;
 5     position: relative;
 6 }
 7 #canvas{
 8     display: block;
 9     border: 1px solid #808080;
10     margin:10px auto;
11 }
12 h2{
13     text-align: center;
14 }
15 #controller{
16     border-radius: 20px;
17     border: 1px solid grey;
18      200px;
19     height:100px;
20     position: absolute;
21     top:10px;
22     left:10px;
23 }
24 #controller a{
25     background: #808080;
26     color:#ffffff;
27     text-decoration: none;
28     line-height: 35px;
29     text-align: center;
30     position: absolute;
31     display: block;
32     50px;
33     height:35px;
34     border:1px solid #808080;
35     border-radius: 20px;
36 }
37 #motion{
38     top:55px;
39     left:10px;
40 }
41 #white{
42     top:55px;
43     left:70px;
44 }
45 #black{
46     top:55px;
47     left:130px;
48 }

3:行为之javascript----main.js

/**
 * Created by jackpan on 2015/4/18.
 */
var canvas;
var context;
var width;
var height;
var balls=[];
var isMove=true;
var motion;
var white;
var black;
var themeColor;
window.onload= function () {
    canvas=document.getElementById("canvas");
    motion=document.getElementById("motion");
    white=document.getElementById("white");
    black=document.getElementById("black");
    motion.innerHTML="运动";
    context=canvas.getContext("2d");
    canvas.width=800;
    canvas.height=600;
    width=canvas.width;
    height=canvas.height;
    context.globalAlpha=0.7;
    for(var i=0;i<50;i++){
        var R=Math.floor(Math.random()*255);
        var G=Math.floor(Math.random()*255);
        var B=Math.floor(Math.random()*255);
        var radius=Math.random()*40+10;
        var ball={
            x:Math.random()*(width-2*radius)+radius,
            y:Math.random()*(height-2*radius)+radius,
            vx:Math.pow(-1,Math.ceil(Math.random()*2))*Math.random()*8+2,
            vy:Math.pow(-1,Math.ceil(Math.random()*2))*Math.random()*4+2,
            radius:radius,
            color:"rgb("+R+","+G+","+B+")"
        }
        balls[i]=ball;
    }
    motion.onclick= function () {
        if(isMove){
            isMove=false;
            motion.innerText="静止";
        }else{
            isMove=true;
            motion.innerHTML="运动";
        }
    }
    white.onclick= function () {
        themeColor="white";
    }
    black.onclick= function () {
        themeColor="black";
    }
    setInterval(
        function () {
            drawBall();
           if(isMove){
               updateBall();
           }
        },40
    )
}
function drawBall(){
    context.clearRect(0,0,width,height);
    if(themeColor=="black"){
        context.fillStyle=themeColor;
        context.fillRect(0,0,width,height);
    }
    for(var i=0;i<balls.length;i++){
        context.globalCompositeOperation="lighter";
        context.beginPath();
        context.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle=balls[i].color;
        context.fill();
    }
}
function updateBall(){
    for(var i=0;i<balls.length;i++){
        var aBall=balls[i];
        aBall.x+=aBall.vx;
        aBall.y+=aBall.vy;
        if(aBall.x<aBall.radius || aBall.x>width-aBall.radius){
            aBall.vx=-aBall.vx;
        }
        if(aBall.y<aBall.radius || aBall.y>height-aBall.radius){
            aBall.vy=-aBall.vy;
        }

    }
}

4:效果静态图展示