canvas之----浮动小球

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<style>

#canvas { border:solid 1px #ccc;}

</style>

<body>

<div id="controls">

    <input id='animateButton' type="button" value="Animate"/>

</div>

<canvas id="canvas" width="750" height="500">Conot</canvas>

<script>

var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),paused =true ,

discs = [

{x:150,y:250,lastX:150,lastY:250,velocityX:-3.2,velocityY:1.5,radius:25,innerColor:"rgba(255,255,255,0.5)",middleColor:"rgba(255,255,255,0.7)",outerColor:"rgba(255,255,0,0.5)",strokeStyle:"gray",}

,{x:250,y:150,lastX:150,lastY:250,velocityX:-2.2,velocityY:3.5,radius:25,innerColor:"rgba(255,255,255,0.3)",middleColor:"rgba(255,255,255,0.7)",outerColor:"rgba(255,255,0,0.5)",strokeStyle:"gray",},

{x:350,y:350,lastX:150,lastY:250,velocityX:-1.2,velocityY:3.5,radius:25,innerColor:"rgba(255,255,255,0.8)",middleColor:"rgba(255,255,255,0.3)",outerColor:"rgba(255,128,0,0.5)",strokeStyle:"gray",},

], numDiscs = discs.length,animateButton = document.getElementById("animateButton");

function update(){

    var disc = null;

    for(var i=0;i<numDiscs;++i){

        disc = discs[i];

        if(disc.x + disc.velocityX + disc.radius> context.canvas.width || disc.x +disc.velocityX - disc.radius <0)

        disc.velocityX = -disc.velocityX ;

        if(disc.y +disc.velocityY +disc.radius > context.canvas.height || disc.y + disc.velocityY - disc.radius <0)

        disc.velocityY = -disc.velocityY;

        disc.x += disc.velocityX;

        disc.y += disc.velocityY;

        }

    }

function draw(){

    var disc = discs[i];

    for (var i=0;i<numDiscs;++i){

        disc  = discs[i];

        gradient = context.createRadialGradient(disc.x,disc.y,0,disc.x,disc.y,disc.radius);

        gradient.addColorStop(0.3,disc.innerColor);

        gradient.addColorStop(0.5,disc.middleColor);

        gradient.addColorStop(1,disc.outerColor);

        context.save();

        context.beginPath();

        context.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false);

        context.fillStyle = gradient;

        context.strokeStyle = disc.strokeStyle;

        context.fill();

        context.stroke();

        context.restore();

        }

}

function animate(time){

    if(!paused){

        context.clearRect(0,0,canvas.width,canvas.height);

        //drawBackground();

        update();

        draw();

        window.requestNextAnimationFrame(animate);

        }

}

animateButton.onclick =function (e){

    paused = paused?false :true ;

    if(paused){

        animateButton.value = "Animate";

    }

    else {

        window.requestNextAnimationFrame(animate);

        animateButton.value ="Pause";

        }

    }

context.font = "48px Helvetica";

window.requestNextAnimationFrame = (function(){

    var originalWebkitMethod, wrapper = undefined,callback = undefined,

    geckoVersion = 0 , userAgent = navigator.userAgent, index =0 , self =this;

    if(window.webkitRequestAnimationFrame){

        wrapper = function (time){

            if(time === undefined ){

                time = +new Date();

                }

                self.callback(time);

            };

        originalWebkitMethod = window.webkitRequestAnimationFrame;

        window.webkitRequestAnimationFrame = function (callback,element){

            self.callback = callback ;

            originalWebkitMethod(wrapper,element);

            }

        }

    if(window.mozRequestAnimationFrame){

        index = userAgent.indexOf("rv:");

        if(userAgent.indexOf("GecKo") != -1){

            geckoVersion = userAgent.substr(index +3 ,3);

            if(geckoVersion ==="2.0"){

                window.mozRequestAnimationFrame = undefined ;

                }

            }

        }

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||window.msRequestAnimationFrame || function (callback,element){

        var start,finish;

        window.setTimeout(function(){

            start = +new Date();

            callback(start);

            finish = +new Date();

            self.timeout = 1000/60 - (finish -start);

            },self.timeout);

        }

    })()

</script>

</body>

</html>

学习 canvas 核心技术做的一个效果。

canvas之----浮动小球的更多相关文章

Android浮动小球与开机自启动
看着手机上的360浮动小球,不评价其具体的功能与实用性,至少在UI设计与交互方面是个不小的创新. 如图片左上角所示,球中还会显示当前手机的运行状况,向下拉动还会有弹射来达到加速.清理等目的. 那好,先 ...
用Xamarin 实现园友的：Android浮动小球与开机自启动
原文:用Xamarin 实现园友的 :Android浮动小球与开机自启动前两天看园子里有筒子写了个 Android浮动小球与开机自启动 , 感觉这种被 360 玩烂的功能原来是如此的简单啊... ...
（canvas）两小球碰撞后的速度问题研究
这两天在研究canvas碰撞先把小球开始运动的图拿出来参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了机械能守恒我其 ...
第七讲：HTML5中的canvas两个小球全然弹性碰撞
<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...
ES6与canvas实现鼠标小球跟随效果
最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效--随着鼠标的移动,会有小球跟随且自动消失的动画. 首先,html部分,目前就一个canvas标签. <canvas id=&qu ...
HTML5 Canvas绚丽的小球详解
实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果掌握Canvas的基本用法技术要点: 从需求出发分析Demo要实现的功能擅于使用HTML5 Canvas 参考手册 ...
canvas学习之小球动画
项目地址:http://pan.baidu.com/s/1skZGPgL 最近学习使用canvas做动画效果,主要原理就是创建一个小球对象,然后小球对象有一个moveball方法,每次让小球沿着随机路 ...
js+canvas(H5)实现小球移动小demo
*canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了代码: <!DOCTYPE html> <html l ...
canvas绘制弹跳小球
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

javascrip中array使用(续)
ECMAScript 5中的数组的方法 Ecmascript5定义了9个新的数组方法遍历,映射,过滤,检测,简化和搜索数组. 1.forEach() Array.orEach()方法从头到尾遍历数组, ...
map/reduce实现排序
import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.co ...
struts1与strut2的区别
struts1和struts2是两个完全不同的框架 struts1工作流程:发布Struts Web服务时,根据web.xml初始化ActionServlet,ActionContext等内容.在接到 ...
【转】[慢查优化]联表查询注意谁是驱动表 & 你搞不清楚谁join谁更好时请放手让mysql自行判定
转自:http://zhengyun-ustc.iteye.com/blog/1942797 写在前面的话: 不要求每个人一定理解联表查询(join/left join/inner join等)时的 ...
Jackson中的那些坑
不符合驼峰规范的变量 “驼峰命名法”请自行百度.简单的来说就是变量的第一个单词以小写字母开始其他单词首字母大写,或者全部单词首字母都大写,分别称为“小驼峰”和“大驼峰” 比如一个符合驼峰规范命名的实体 ...
redis 手册
一.概述: 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与 ...
微信开发第5章通过accesstoken获取用户基本信息并修改用户备注
在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同).公众号可通过本接口来根据Op ...
如何判断Linux是否适合你
如果你厌烦了windows,或者想延长旧pc的寿命,也或者想给小孩使用一款os,linux都能满足你. 开源操作系统linux的关键优势: - 免费的. - 大部分linux软件也是免费的. - li ...
(2/18)重学Standford_iOS7开发_Xcode_课程笔记
第二课: 1.惰性初始化 -(ObjectType *)example { f(!_example) example =[[ObjectType alloc] init]; return _examp ...
Hibernate—第一个案例
百度百科上是这样写道的:Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可 ...

canvas之----浮动小球

canvas之----浮动小球的更多相关文章

随机推荐

热门专题