<!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之----浮动小球,布布扣,bubuko.com
时间： 2024-10-20 01:13:14