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. eclipse 使用指南

    eclipse使用指南 eclipse下载地址: 1.eclipse快捷键 2.将eclipse新建项目的默认编码GBK改为UTF-8 3.Java 编程下 Eclipse 如何设置单行代码显示的最大 ...

  2. CI 在nginx中出现404错误的解决方式

    因为你的nginx配置的是截取.php文件后缀的访问转发到PHP-CGI,而index.php和index.php/是不一样的.. 你在nginx里面写一句: if (!-e $request_fil ...

  3. 【转】iTunes下载速度太慢？两招帮你提速！-- 不错

    原文网址:http://bbs.app111.com/thread-275-1-1.html 不用说,很多朋友都发现在大陆,下载 iTunes 上的东西实在是慢如蜗牛,小一点的软件还能坚持一下,大一点 ...

  4. RESTLET开发实例（三）基于spring的REST服务

    http://www.lifeba.org/arch/restlet_spring_3.html 前面两篇文章,我们介绍了基于JAX-RS的REST服务以及Application的Rest服务.这里将 ...

  5. SQL Server中CURD语句的锁流程分析

    我只在数据库选项已开启“行版本控制的已提交读”(READ_COMMITTED_SNAPSHOT为ON)中进行了观察. 因此只适用于这种环境的数据库. 该类数据库支持四种不同事务隔离级别,下面分别观察数 ...

  6. 文件操作总结：关于文本和二进制流（typeText&typeBinary)

    本人能力.精力有限,所言所感都基于自身的实践和有限的阅读.查阅,如有错误,欢迎拍砖,敬请赐教——博客园:钱智慧. 总结: CFile,其自身是不提供缓冲区的(?但CFile又有一个Flush,这一点目 ...

  7. 五指CMS发布1.4版本，更多的新功能

    五指cms v1.4变更: 新增内容手动分页新增百度地图新增订单管理模块新增订单地址管理增加Microsoft YaHei字体新增推广邀请模块新增私密下载,下载函数 新增百度地图新增筛选功能 修正全局 ...

  8. Azure 虚拟机常见问题-下

    虚拟机上的默认用户名和密码是什么? Azure 提供的映像没有预先配置用户名和密码.使用这些映像中的其中一个创建虚拟机时,你需要提供用户名和密码,用于登录到虚拟机. 提示 如果忘记了用户名或密码且安装 ...

  9. HW2.14

    import java.util.Scanner; public class Solution { public static void main(String[] args) { final dou ...

  10. 简述configure、pkg-config、pkg_config_path三者的关系

    简述configure.pkg-config.pkg_config_path三者的关系 一.什么是configure 源码安装过程中大多会用到configure这个程序,一般的configure都是一 ...