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.      width: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.      width: 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.      width: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

  1. /**
  2.  * Created by jackpan on 2015/4/18.
  3.  */
  4. var canvas;
  5. var context;
  6. var width;
  7. var height;
  8. var balls=[];
  9. var isMove=true;
  10. var motion;
  11. var white;
  12. var black;
  13. var themeColor;
  14. window.onload= function () {
  15.     canvas=document.getElementById("canvas");
  16.     motion=document.getElementById("motion");
  17.     white=document.getElementById("white");
  18.     black=document.getElementById("black");
  19.     motion.innerHTML="运动";
  20.     context=canvas.getContext("2d");
  21.     canvas.width=800;
  22.     canvas.height=600;
  23.     width=canvas.width;
  24.     height=canvas.height;
  25.     context.globalAlpha=0.7;
  26.     for(var i=0;i<;i++){
  27.         var R=Math.floor(Math.random()*255);
  28.         var G=Math.floor(Math.random()*255);
  29.         var B=Math.floor(Math.random()*255);
  30.         var radius=Math.random()*40+10;
  31.         var ball={
  32.             x:Math.random()*(width-2*radius)+radius,
  33.             y:Math.random()*(height-2*radius)+radius,
  34.             vx:Math.pow(-1,Math.ceil(Math.random()*2))*Math.random()*8+2,
  35.             vy:Math.pow(-1,Math.ceil(Math.random()*2))*Math.random()*4+2,
  36.             radius:radius,
  37.             color:"rgb("+R+","+G+","+B+")"
  38.         }
  39.         balls[i]=ball;
  40.     }
  41.     motion.onclick= function () {
  42.         if(isMove){
  43.             isMove=false;
  44.             motion.innerText="静止";
  45.         }else{
  46.             isMove=true;
  47.             motion.innerHTML="运动";
  48.         }
  49.     }
  50.     white.onclick= function () {
  51.         themeColor="white";
  52.     }
  53.     black.onclick= function () {
  54.         themeColor="black";
  55.     }
  56.     setInterval(
  57.         function () {
  58.             drawBall();
  59.            if(isMove){
  60.                updateBall();
  61.            }
  62.         },40
  63.     )
  64. }
  65. function drawBall(){
  66.     context.clearRect(0,0,width,height);
  67.     if(themeColor=="black"){
  68.         context.fillStyle=themeColor;
  69.         context.fillRect(0,0,width,height);
  70.     }
  71.     for(var i=0;i<balls.length;i++){
  72.         context.globalCompositeOperation="lighter";
  73.         context.beginPath();
  74.         context.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2,true);
  75.         context.closePath();
  76.         context.fillStyle=balls[i].color;
  77.         context.fill();
  78.     }
  79. }
  80. function updateBall(){
  81.     for(var i=0;i<balls.length;i++){
  82.         var aBall=balls[i];
  83.         aBall.x+=aBall.vx;
  84.         aBall.y+=aBall.vy;
  85.         if(aBall.x<aBall.radius || aBall.x>width-aBall.radius){
  86.             aBall.vx=-aBall.vx;
  87.         }
  88.         if(aBall.y<aBall.radius || aBall.y>height-aBall.radius){
  89.             aBall.vy=-aBall.vy;
  90.         }
  91.  
  92.     }
  93. }

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. 【转】Xcode重构功能怎么用我全告诉你

    原文网址:http://www.cocoachina.com/ios/20160127/15097.html 你会经常需要重构你的代码,让它有更好的结构,可读性或者提高可维护性.Xcode作为IDE其 ...

  2. 使用 jQuery 进行前端验证 -- 1

    如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型.并且可以说任何有输入的地方都需要的去验证,验证一方面是要求用户输入正确格式的数据,同时也是避免恶意的用户进行非法的输 ...

  3. ASP.NET MVC3细嚼慢咽---(3)Razor视图语法

    MVC3.0中新增加了Razor视图,Razor视图的语法以@符号为核心,貌似在这个时代离不开@了,微博,邮箱都用这个. 1.输出变量和文本 @DateTime.Now @for (int i = 0 ...

  4. uboot环境变量（设置bootargs向linux内核传递正确的参数）

    这是我uboot的环境变量设置,在该设置下可以运行initram内核(从内存下载到nandflash再运行),但是运行nfs根文件系统的时候一直出错,各种错误.查看了很多资料后猜想应该是uboot传递 ...

  5. ZOJ 3790 Consecutive Blocks

    大致题意就是给你一个数列,让你最多移除K个数字,使得连续的相同数字的长度最大,并求出最大长度. 我们将此序列按颜色排序,颜色相同的话按位置排序,那么排完序之后颜色相同的blocks就在一起,只是他们的 ...

  6. [SCOI2009]游戏

    Time Limit: 1 Sec  Memory Limit: 162 MB Description windy学会了一种游戏.对于1到N这N个数字,都有唯一且不同的1到N的数字与之对应.最开始wi ...

  7. [NOIP2002]自由落体

    NOIp2002提高组 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算 ...

  8. 求正整数n所有可能的和式的组合（如；4=1+1+1+1、1+1+2、1+3、2+1+1、2+2

    作者:张小二 nyoj90 ,可以使用递归的方式直接计算个数,也可以通过把满足的个数求出来计数,因为在juLy博客上看到整数划分,所以重写了这个代码,就是列出所m的可能性,提交后正确.acmer的入门 ...

  9. 揭开嵌入式c面试题背后的玄机

    今天老大让我针对一个面试者出些嵌入式方面的面试题,主要是想对他的技术深度进一步了解.我就出了下面这些问题,每个问题背后都是考察一个嵌入式程序员应该具备的相关技能.当然这些只是我的个人理解,不一定正确. ...

  10. Tools that help you scrape web data----帮助你收集web数据的工具

    There are many programs that can be used to extract bulk information from a web site, including brow ...