5.1_動畫循環
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動畫循環</title>
<style>
body{
background: #ddd;
}
#canvas{
background: #fff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}
#controls{
margin-top: 10px;
margin-left: 15px;
}
</style>
</head>
<body>
<div id="controls">
<input id="animateButton" type="button" value="Animate" />
</div>
<canvas id="canvas" width="750" height="500"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var paused = true;
var discs = [
{
x:150,
y:250,
lastX:150,
lastY:250,
velocityX:-3.2,
velocityY:3.5,
radius:25,
innerColor:'rgba(255,255,0,1)',
middleColor:'rgba(100,145,230,0.7)',
outerColor:'rgba(100,145,230,0.5)',
strokeStyle:'gray'
},
{
x:50,
y:150,
lastX:50,
lastY:150,
velocityX:2.2,
velocityY:2.5,
radius:25,
innerColor:'rgba(100,145,230,1)',
middleColor:'rgba(100,145,230,0.7)',
outerColor:'rgba(100,145,230,0.5)',
strokeStyle:'blue'
},
{
x:150,
y:75,
lastX:150,
lastY:75,
velocityX:1.2,
velocityY:1.5,
radius:25,
innerColor:'rgba(255,0,0,1)',
middleColor:'rgba(255,0,0,0.7)',
outerColor:'rgba(255,0,0,0.5)',
strokeStyle:'orange'
},
];
var numDiscs = discs.length;
var animateButton = document.getElementById('animateButton');
context.font = '48px Helvetica';
drawBackground();
animateButton.onclick = function(){
paused = paused? false:true;
if(paused){
animateButton.value = 'Animate';
}else{
window.requestAnimationFrame(animate);
animateButton.value = 'Pause';
}
}
function animate(time){
if(!paused){
context.clearRect(0,0,canvas.width,canvas.height);
drawBackground();
update();
drawCircles();
window.requestAnimationFrame(animate);
}
}
function update(){
var disc;
for(var i=0;i<numDiscs;i++){
disc = discs[i];
if(disc.x+disc.radius+disc.velocityX>context.canvas.width || disc.x-disc.radius+disc.velocityX<0){
disc.velocityX = -disc.velocityX;
}
if(disc.y+disc.radius+disc.velocityY>context.canvas.height || disc.y-disc.radius+disc.velocityY<0){
disc.velocityY = -disc.velocityY;
}
disc.x += disc.velocityX;
disc.y += disc.velocityY;
}
}
function drawCircles(){
var disc;
var gradient;
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.0,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 drawBackground(){
context.save();
context.shadowColor = undefined;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
var step_y = 12;
var left_margin = step_y*4;
var top_margin = step_y*3;
var i = canvas.height;
context.strokeStyle = 'lightgray';
context.lineWidth = 0.5;
while(i>top_margin){
context.beginPath();
context.moveTo(0,i);
context.lineTo(canvas.width,i);
context.stroke();
i-=step_y;
}
context.restore();
}
</script>
</html>
