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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <link href="style.css" rel="stylesheet" type="text/css"/>

     <script type="text/javascript" src="main.js"></script>

 </head>

 <body>

 <div id="container">

     <canvas id="canvas"></canvas>

     <div id="controller">

         <h2>canvas控件</h2>

         <a href="javascript:void(0);" id="motion"></a>

         <a href="javascript:void(0);" id="white">white</a>

         <a href="javascript:void(0);" id="black">black</a>

     </div>

 </div>

 </body>

 </html>

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

　

 #container{

     width:800px;

     height:600px;

     margin: 10px auto;

     position: relative;

 }

 #canvas{

     display: block;

     border: 1px solid #808080;

     margin:10px auto;

 }

 h2{

     text-align: center;

 }

 #controller{

     border-radius: 20px;

     border: 1px solid grey;

     width: 200px;

     height:100px;

     position: absolute;

     top:10px;

     left:10px;

 }

 #controller a{

     background: #808080;

     color:#ffffff;

     text-decoration: none;

     line-height: 35px;

     text-align: center;

     position: absolute;

     display: block;

     width:50px;

     height:35px;

     border:1px solid #808080;

     border-radius: 20px;

 }

 #motion{

     top:55px;

     left:10px;

 }

 #white{

     top:55px;

     left:70px;

 }

 #black{

     top:55px;

     left:130px;

 }

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<;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:效果静态图展示

　　

H5 canvas 小demo之小球的随机运动的更多相关文章

  1. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

  3. Flexible实现H5移动端适配小demo

    前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...

  4. h5 canvas 图片上传操作

    最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化 html: <pre name="c ...

  5. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  6. 两个Canvas小游戏

    或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...

  7. Android -- 自定义View小Demo，动态画圆（一）

    1,转载:(http://blog.csdn.NET/lmj623565791/article/details/24500107),现在如下图的效果: 由上面的效果图可以看到其实是一个在一个圆上换不同 ...

  8. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  9. Android学习小Demo一个显示行线的自定义EditText

    今天在处理一个EditText的时候,想着把EditText做成像一本作业本上的纸一样,每一行都可以由线条隔开,具体效果如下: 1)最开始的思路 一开始的想法是很简单的,找出每一行的高度,然后一行一行 ...

随机推荐

  1. UIScrollView,UIView转换UIImage代码(整个view截图, 不只是可视区域)

    -(UIImage*)captureView:(UIView *)theView{     CGRect rect = theView.frame;     if ([theView isKindOf ...

  2. 嵌入式 hi3518c裸板uboot烧写、kernel烧写、fs烧写小结

    1.在uboot中我可以添加自己的命令,添加的方法是找到一个uboot的命令,然后模仿着去增加属于自己的命令代码以及实现函数就可以 2.记住在使用printf进行调试的时候,在遇到指针或者字符串的时候 ...

  3. VS2008压力测试时web测试记录器无显示

    系统:win7 浏览器:IE8 web测试记录器:Web Test Recorder   在运行vs2008Web压力测试时一直在浏览器左侧的web测试记录器无显示. 解决办法:     在IE工具栏 ...

  4. deep learning(1)BP神经网络原理与练习

    具体原理参考如下讲义: 1.神经网络 2.反向传导 3.梯度检验与高级优化 看完材料1和2就可以梳理清楚bp神经网络的基本工作原理,下面通过一个C语言实现的程序来练习这个算法 //Backpropag ...

  5. Re-enable Alcatraz on Xcode 6.3.2 or newer

    I’ve been using Alcatraz to manage Xcode plug-ins for some time now. After updating to Xcode 6.3.2 a ...

  6. mysql常见优化，更多mysql，Redis，memcached等文章

    mysql常见优化 http://www.cnblogs.com/ggjucheng/archive/2012/11/07/2758058.html 更多mysql,Redis,memcached等文 ...

  7. [delphi技术]Delphi常见图象格式转换技术

    TJPEGScale = (jsFullSize, jsHalf, jsQuarter, jsEighth);//图片大小(全部,1/2,1/4,1/8)TBitmap.pixelFormat:=pf ...

  8. Oracle ABP(Autotask Background Process)

    ABP相当于自动任务与调度程序之间的中介,其主要作用是将自动任务转换成Autotask作业,供调度程序执行.同样重要的是,ABP还维护所有任务执行的历史记录.ABP将其专用资料档案库存储在sysaux ...

  9. 配置ModSecurity防火墙与OWASP规则

    中文译文参考:http://netsecurity.51cto.com/art/201407/446264.htm 英文原文参考:http://resources.infosecinstitute.c ...

  10. 立体视觉-opencv中立体匹配相关代码

    三种匹配算法比较 BM算法: 该算法代码: view plaincopy to clipboardprint? CvStereoBMState *BMState = cvCreateStereoBMS ...