<!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. 2013 ACM区域赛长沙 C Collision HDU 4793

    题意:在平面上0,0点,有一个半径为R的圆形区域,并且在0,0点固定着一个半径为RM(<R)的圆形障碍物,现在圆形区域外x,y,有一个半径 为r的,并且速度为vx,vy的硬币,如果硬币碰到了障碍 ...

  2. Poj 3695-Rectangles 矩形切割

    Rectangles Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 3846   Accepted: 1124 Descri ...

  3. C语言宏定义函数中的“_##”的意思

    最近在看google vp9的代码的时候碰到: #define intra_pred_sized(type, size) \ void vp9_##type##_predictor_##size##x ...

  4. 字符编码笔记：ASCII，Unicode和UTF-8，附带 Little endian和Big endian的解释

    作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步 ...

  5. 3 weekend110的shuffle机制 + mr程序的组件全貌

    前面,讲到了hadoop的序列化机制,mr程序开发,自定义排序,自定义分组. 有多少个reduce的并发任务数可以控制,但有多少个map的并发任务数还没 缓存,分组,排序,转发,这些都是mr的shuf ...

  6. Yii之权限管理扩展 srbac

    最近在研究 Yii 的权限控制功能,尽管Yii 自身提供了一个简单的权限管理,但是很多时候,我们还是需要对其做一点扩展. 在这里,我向大家推荐一个不错的扩展:SRBAC. 在Yii的官方网站的exte ...

  7. 【转】Flask安装

    Flask 依赖两个外部库:Werkzeug 和 Jinja2 . Werkzeug 是一个 WSGI(在 Web 应用和多种服务器之间的标准 Python 接口) 工具集.Jinja2 负责渲染模板 ...

  8. 问题-[WIN764位系统]操作UDL驱动不全处理

    http://www-01.ibm.com/support/docview.wss?uid=swg21503768 方法# 1 单击“开始——运行” 输入一个命令类似如下:        C:\Win ...

  9. （转）Zend Studio 10.6.1破解注册图文详解

    原文来自:http://www.softown.cn/soft/zend-studio/windows/10.6.1#downloads 下面我们以Zend Studio 10.6.1正式版为例来介绍 ...

  10. Linux 内核使用的 GNU C 扩展

    gcc核心扩展linuxforum(转)=========================== Linux 内核使用的 GNU C 扩展 =========================== GNC ...