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. Python‘ssl.match_hostname()’函数SSL证书验证安全绕过漏洞

    漏洞名称: Python‘ssl.match_hostname()’函数SSL证书验证安全绕过漏洞 CNNVD编号: CNNVD-201312-033 发布时间: 2013-12-04 更新时间: 2 ...

  2. VMwareWorkstation10安装OS_X_Mavericks10.9.2图文详细教程

    一.VMware的环境配置...        1.1安装VMware的MAC OS补丁...        1.2建立虚拟机... 二.OS_X_Mavericks的安装及安装驱动...      ...

  3. .net HTMLParser详细使用说明　强大的Filter类 解析HTML文档如此简单

    背景: HTMLParser原本是一个在sourceforge上的一个Java开源项目,使用这个Java类库可以用来线性地或嵌套地解析HTML文本.他的 功能强大和开源等特性吸引了大量Web信息提取的 ...

  4. c#调用带有安全认证的java webservice

    最近使用c#调用另外一个同事写的java webservice耽误了很多时间,网上资料不太完整,走了很多弯路,希望对大家有帮助. 基本思路是1.拼装soap使用http post ,主要将验证身份信息 ...

  5. 谈谈分布式事务之三: System.Transactions事务详解[下篇]

    在前面一篇给出的Transaction的定义中,信息的读者应该看到了一个叫做DepedentClone的方法.该方法对用于创建基于现有Transaction对 象的“依赖事务(DependentTra ...

  6. SPOJ3267 D-query 离线+树状数组 在线主席树

    分析:这个题,离线的话就是水题,如果强制在线,其实和离线一个思路,然后硬上主席树就行了 离线的代码 #include <iostream> #include <stdio.h> ...

  7. 2015年9月29日html基础加强学习笔记

    创建一个最简便的浏览器 首先打开VS2010,然后在空间里拖出一个Form控件当主页面,其次拖出一个Textbox控件作为地址栏,然后加一个Button控件作为按钮,最后拖出一个WebBrowser作 ...

  8. POJ-3070Fibonacci（矩阵快速幂求Fibonacci数列） uva 10689 Yet another Number Sequence【矩阵快速幂】

    典型的两道矩阵快速幂求斐波那契数列 POJ 那是 默认a=0,b=1 UVA 一般情况是 斐波那契f(n)=(n-1)次幂情况下的(ans.m[0][0] * b + ans.m[0][1] * a) ...

  9. 关于Windows Azure的常见问题-执行与维护FAQ

    执行与维护 使用虚拟机运行业务应用有什么需要注意的地方? Windows Azure 会周期性地更新主机环境,以确保平台上运行的所有应用程序和虚拟机始终处于安全的环境.此更新过程可能会导致您的虚拟机重 ...

  10. xp系统下网络打印机怎么设置

    亲测,可行 打印机共享可以有效节约办公资源,提高办公效率.可是还有很多朋友不知道怎么设置,我们这里讲一下网络打印机的设置方法. 1.我们点开桌面左下角的开始菜单,选择“打印机和传真” 2.我们右击某个 ...