<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#myCanvas {
border:1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" height="500" width="500"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var y = 250;
var x = 150;
var flag = "right";
var ctx = canvas.getContext("2d");
setInterval(function(){
aa(ctx);
},1);
function aa(ctx){
ctx.clearRect(0,0,500,500);
ctx.fillStyle = "red";
ctx.fillText("HelloCanvas!", 10, 35);
ctx.save();
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(x,150,100,100);
if (flag === "right") {
x++;
if (x >= 400) {
flag = "left";
} else {
flag = "right";
}
} else {
x--;
if (x === 0) {
flag = "right";
} else {
flag = "left";
}
}
ctx.restore();
}
/* ctx.strokeStyle = "rgb(0, 159, 93)";
ctx.strokeRect(50,50,100,100);
ctx.fillStyle = "red";
ctx.fillText("HelloCanvas!", 10, 35);
ctx.beginPath();
ctx.moveTo(22,50);
ctx.lineTo(22,75);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(275,375,50,0,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(255,370);
ctx.arc(250,370,5,0,Math.PI*2,true);
ctx.fill();
ctx.strokeStyle = "red";
ctx.closePath();
ctx.moveTo(300,370);
ctx.arc(295,370,5,0,Math.PI*2,true);
ctx.moveTo(302,390);
ctx.arc(277,390,25,0,Math.PI,false);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(150, 250, 250, 250);
ctx.stroke();
ctx.closePath(); */
/* window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
canvas = document.querySelector(‘canvas‘)
ctx = canvas.getContext(‘2d‘)
onresize = function(){
canvas.width = canvas.clientWidth
canvas.height = canvas.clientHeight
}
onresize()
onmousemove = function(e){
rect = canvas.getBoundingClientRect();
gravityPoint = {
x: e.clientX - rect.left,
y: e.clientY - rect.top
}
}
gravityPoint = {x:canvas.width/2,y:canvas.height/2}
gravityStrength = 10
particles = []
calculate = function(){
for(var i=0;i<particles.length;i++){
p = particles[i]
x = gravityPoint.x-p.x
y = gravityPoint.y-p.y
a = x*x+y*y
a = a = a>100?gravityStrength/a:gravityStrength/100
p.xv = (p.xv+a*x)*0.99
p.yv = (p.yv+a*y)*0.99
p.x += p.xv
p.y += p.yv
p.a *= 0.99
}
}
draw = function(){
ctx.clearRect(0,0,canvas.width,canvas.height)
for(var i=0;i<particles.length;i++){
p = particles[i]
ctx.globalAlpha = p.a
ctx.fillStyle = p.c
ctx.beginPath()
ctx.arc(p.x,p.y,p.s,0,2*Math.PI)
ctx.fill()
}
}
newParticle = function(){
type = (Math.random()*2|0)
particles.push({
x:gravityPoint.x-5+10*Math.random(),
y:gravityPoint.y-5+10*Math.random(),
xv:type?18*Math.random()-9:24*Math.random()-12,
yv:type?18*Math.random()-9:24*Math.random()-12,
c:type?‘rgb(255,‘+((200*Math.random())|0)+‘,‘+((80*Math.random())|0)+‘)‘:‘rgb(255,255,255)‘,
s:type?5+10*Math.random():1,
a:1
})
if(particles.length>700){particles.shift()}
}
setInterval(newParticle,5)
loop = function(){
draw()
calculate()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop) */
</script>
</html>原文：http://blog.csdn.net/u012844719/article/details/18796797