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. WordPress Checkout插件跨站脚本漏洞和任意文件上传漏洞

    漏洞名称: WordPress Checkout插件跨站脚本漏洞和任意文件上传漏洞 CNNVD编号: CNNVD-201311-015 发布时间: 2013-11-04 更新时间: 2013-11-0 ...

  2. Vimwiki使用笔记

    vimwiki使用笔记 vimwiki vimwiki installation syntax Inline links Image Link Header List Table code block ...

  3. 【转】objective-c基本数据类型之输出格式符

    原文网址:http://blog.csdn.net/mamong/article/details/8255691 基本数据类型 1. int 输出格式符:%i, %d, %o %x, 2. float ...

  4. Android 实用代码七段(二)

    声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 一.获取应用程序下所有Acti ...

  5. 函数的重载与 泛型(generic)有什么不同?

    函数重载指   重载函数,形参(类型)不同,实现的功能一样. 泛型算法指2个方面:这些算法可作用于各种不同的容器类型,而这些容器类型又可以容纳多种不同类型的元素.

  6. Curl之获取外网IP

    获取外网IP:curl -s ifconfig.me

  7. Spring mvc get和post传值乱码问题

    1.url拼值 传单值 对象 list  map都是用json的格式传入后台 <%@ page language="java" contentType="text/ ...

  8. java基础全套

    这是我自己早前听课时整理的java基础全套知识  使用于初学者 也可以适用于中级的程序员 我做成了chm文档的类型  你们可以下载  笔记是比较系统全面,可以抵得上市场上90%的学习资料.讨厌那些随便 ...

  9. centos解决ping unknown host的问题

    当ping www.baidu.com 的时候如果出现 unknown host的提示 再ping一下IP, ping 8.8.8.8 如果此时能ping通,那么就是DNS服务器没有设置,不能解析域名 ...

  10. qosort 使用使用小例子

    输入 1500 3150 300100 200 输出结果470 471100    200150    300470    471     #include <iostream> #inc ...