<!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 核心技术 做的一个 效果。