<!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. 网页局部刷新的办法。javascript+frame 或者ajax原理

    <frame>标签 + javascriptajax (DWR \ jquery \ extjs \ vs 下的ScriptManager和UpdatePanel控件)

  2. openstack kvm 虚拟机磁盘差异衍生

    1, openstack虚拟实例备份之--多镜像格式多镜像文件合并为一个镜像文件衍生-差异镜像文件    /var/lib/nova/instances/b0abc22f-1a73-4079-b1bc ...

  3. 4 weekend110的YARN的通用性意义 + yarn的job提交流程

    Mr程序写完之后,提交给yarn,yarn会产生一个MRAppMaster,想说的是,yarn变得很 通用,yarn集群上,不光可以跑mr程序,还可以跑各种运算模型. 海量批处理,mapreduce ...

  4. python Day 1 - 搭建开发环境

    搭建开发环境 首先,确认系统安装的Python版本是2.7.x: $ python --version Python 2.7.5 然后,安装开发Web App需要的第三方库: 前端模板引擎jinja2 ...

  5. 使用js实现html锚功能，可以任意定位锚的位置，比锚更加灵活

    今天记录一个js功能,发现该功能很实用,拿出来跟大家分享. 这里我使用js的window.scrollTo()函数,该函数的用法给大家重复一下,语法为scrollTo(x,y),这里x表示在窗口文档显 ...

  6. Spring Security4源码解读探寻权限机制

    我们知道springSecurity 会在用户登录的时候获取用户的角色权限, 你是一个普通用户可能没有管理员拥有的权限.用户登录后Authentication 获取用户的权限. 不通用户登录系统会生成 ...

  7. vim的全局替换

    本文出自   http://blog.csdn.net/shuangde800 本文是在学习<使用vi编辑器, Lamb & Robbins编著>时在所记的笔记. 本文内容: 基本 ...

  8. web开发性能优化---扩展性能篇

    1.实现代码分离 一个成熟的软件开发团队一般都不会全然手写代码.这里讲的代码分离仅仅要是开发中用到的小技巧,通过底层框架+手工代码方式结合实现高速开发和高速扩展. Code目录内文件不同意改动,目录主 ...

  9. oracle5

    oracle中事务处理 什么是事务 事务用于保证数据的一致性,它由一组相关的dml语句组成,该组的dml(数据操作语言:增删改,没有查询)语句要么全部成功,要么全部失败. 如:网上转账就是典型的要用事 ...

  10. 节点类（CCNode）

    节点与渲染树 回顾前面的介绍,我们已经知道了精灵.层和场景如何构成一个游戏的框架.精灵属于层,层属于场景,玩家与精灵互动,并导致游戏画面在不同场景中切换.把每个环节拼接在一起,我们得到了一个完整的关系 ...