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. EPUB弹出窗口式脚注

    网上搜到一些国学典籍的EPUB版,虽有古人的注解,但正文和注解混排在一起,当我只想迅速读正文的时候比较碍眼.于是研究了一下 EPUB3 中有关脚注(footnote)的规格定义,写了一个 Python ...

  2. JS中document.createElement()用法及注意事项

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...

  3. ubuntu usb权限问题解决

    在/etc/udev/rules.d/ 创建51-android.rules SUBSYSTEM==" SUBSYSTEM=="

  4. Hive 0.12 Caused by: MetaException(message:Version information not found in metastore. )解决方法

    配置完成Mysql存储元数据信息,启动后测试show tables报错ERROR exec.DDLTask: org.apache.hadoop.hive.ql.metadata.HiveExcept ...

  5. HDOJ-ACM1019(JAVA) 多个数的最小公倍数

    题意:求多个数的最小公倍数 很简单,但是我一开始的做法,估计会让结果越界(超过int的最大值) import java.util.*; import java.io.*; public class M ...

  6. Kooboo CMS 介绍

    Kooboo的定位是一个CMS,内容管理平台,从更严格意义上来说,它更应该网站快速开发平台.针对一般网站开发过程的分析和提炼,着重在解决网站的一般需求,提出一套快速开发网站的理念和方法.在这些理念和方 ...

  7. POJ3107--Godfather（树的重心）

    vector建图被卡了..改为链式前向星500ms过的..差了四倍多?... 表示不太会用链表建图啊..自己试着写的,没看模板..嗯..果然错了..落了一句话orz 树的重心就是找到一个树中一个点,其 ...

  8. XXX 用户 is not in the sudoers file. This incident will be reported 的问题解决方案

    说的是,这种问题,是出现在ubuntu系统里. root@SparkSingleNode:/usr/local/jdk# pwd /usr/local/jdk root@SparkSingleNode ...

  9. Prime Land

    http://poj.org/problem?id=1365 题意:给定一个数字n的拆分形式,然后让你求解n-1的值: 解析:直接爆搞 // File Name: poj1365.cpp // Aut ...

  10. 2016/9/7 jdbc.properties配置数据库相关

    ##MySQL#jdbc.driver=com.mysql.jdbc.Driver#jdbc.url=jdbc:mysql://localhost:3306/test#jdbc.username=ro ...