<!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. 洛谷1439 排列LCS问题

    洛谷1439 排列LCS问题 本题地址:http://www.luogu.org/problem/show?pid=1439 题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输 ...

  2. phpnow下mysqli加载不了的问题

    用了phpnow也有蛮长一段时间了.一直感觉还不错,不过就是差点把手动配置apache/php/mysql环境的方法都给忘了. 这几天一直都在找crm系统,可惜没有几个满意的.今天逛上了weberp这 ...

  3. 一个空格引发的bug

    好久没写博客了. 我们的一个项目用的thinkphp框架,当在debug模式下面运行很正常,但切换到生产模式时,刷新页面第一次可以正常显示,刷新第二次会出现错误如下: Fatal error: Cal ...

  4. 阅读STL源码剖析之list

    首先,以我之愚见,觉得有两个地方可以优化一下,不知对否,有待商榷: 1.在list的结点定义中 template<typename T> struct __list_node { type ...

  5. Zend Framework 2参考Zend\Authentication(HTTP认证适配器)

    Zend Framework 2参考Zend\Authentication(HTTP认证适配器) 介绍 Zend\Authentication\Adapter\Http提供了RFC-2617, Bas ...

  6. 几个shell自动化脚本(定期清理、磁盘空间、搜寻关键字)

    发布时间:2014-10-28 09:52:17   编辑:AHLinux.com 分享几个精致耐用的shell脚本,分别用于定期清理暂存文件.检查硬盘空间使用率.搜寻所有记录文件的关键字符串.有需要 ...

  7. MySQL添加外键时报错 ERROR 1215 (HY000): Cannot add foreign key constraint

    1.数据类型      2.数据表的引擎 数据表 mysql> show tables; +------------------+ | Tables_in_market | +--------- ...

  8. 【转载】NativeSQL实例

    转自:http://blog.sina.com.cn/s/blog_3f2c03e301017fqz.html     ---------------------------------------- ...

  9. Linux进程间通信——使用数据报套接字

    前一篇文章, Linux进程间通信——使用流套接字介绍了一些有关socket(套接字)的一些基本内容,并讲解了流套接字的使用,这篇文章将会给大家讲讲,数据报套接字的使用. 一.简单回顾——什么是数据报 ...

  10. [D3] 6. Color Scale

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...