<!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之----浮动小球的更多相关文章

  1. Android浮动小球与开机自启动

    看着手机上的360浮动小球,不评价其具体的功能与实用性,至少在UI设计与交互方面是个不小的创新. 如图片左上角所示,球中还会显示当前手机的运行状况,向下拉动还会有弹射来达到加速.清理等目的. 那好,先 ...

  2. 用Xamarin 实现园友的 ：Android浮动小球与开机自启动

    原文:用Xamarin 实现园友的 :Android浮动小球与开机自启动 前两天看园子里有筒子写了个 Android浮动小球与开机自启动  , 感觉这种被 360 玩烂的功能原来是如此的简单啊... ...

  3. （canvas）两小球碰撞后的速度问题研究

    这两天在研究canvas碰撞 先把小球开始运动的图拿出来 参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善 怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了 机械能守恒我其 ...

  4. 第七讲：HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

  5. ES6与canvas实现鼠标小球跟随效果

    最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效--随着鼠标的移动,会有小球跟随且自动消失的动画. 首先,html部分,目前就一个canvas标签. <canvas id=&qu ...

  6. HTML5 Canvas绚丽的小球详解

    实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...

  7. canvas学习之小球动画

    项目地址:http://pan.baidu.com/s/1skZGPgL 最近学习使用canvas做动画效果,主要原理就是创建一个小球对象,然后小球对象有一个moveball方法,每次让小球沿着随机路 ...

  8. js+canvas(H5)实现小球移动小demo

    *canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...

  9. canvas绘制弹跳小球

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 转载:Python中的new style class机制实现

    1.Python中的对象模型python中所有东西都是对象 class对象:表示Python内置的类型和定义的类型instance对象(实例对象):表示由class对象创建的实例 1.1 对象间的关系 ...

  2. lost connection to mysql server at "reading initial communication packet",system error:2

  3. latin1字符集在navicat下显示乱码（mysql）

    用navicat查看一个表的内容时显示如下

  4. 数字证书KeyTool使用（第二篇）

    http://my.oschina.net/frankies/blog/344914 J2SDK提供了keytool命令行工具,可以根据指定的参数来创建数字证书.生成的证书或证书库默认保存在命令行当前 ...

  5. 微信小程序开发体验

    1.  申请小程序账号 小程序目前不支持个人申请,企业申请后填写基本信息 本来以为用原来公司申请的公众号就可以申请小程序权限,貌似不行 2.  添加开发者 管理员默认拥有开发者所有权限 添加其他开发者 ...

  6. java多线程样例

    这里我们做一个完整的样例来说明线程产生的方式不同而生成的线程的差别: package debug; import java.io.*;import java.lang.Thread; class My ...

  7. cocos2d-x 2.0.3 设置高清模式注意事项（已移除-hd方式）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=304 在cocos2d-x 2. ...

  8. C# 网络编程之网页自动登录 (一).使用WebBrower控件模仿登录

    最近学习C#网络编程中,想实现网页自动登录并提交GET/POST信息,再实现循环登录不断发送报文给服务器,服务器发送消息给客户端记录能登录的账户和密码,做到后面实现绕过验证码.动态抓取登录位置等,但由 ...

  9. AFNetworking 新版本3.0的迁移

    AFNetworking在3.0版本中删除了基于 NSURLConnection API的所有支持.如果项目以前使用过这些API,那么我们需要升级到基于 NSURLSession 的API的AFNet ...

  10. EF 命令

    我们选VS中工具-库程序包管理器-程序包管理器控制台, 这时在VS底部会出现控制台 这时候我们要执行四个操作: 下载安装EF 到工程.PM> Install-Package EntityFram ...