65课，是放错了还是放错了。。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="firstCanvas" width="999" height="666">大兄弟你的浏览器不支持Canvas！！！</canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById("firstCanvas");//调用Canvas元素
var context=canvas.getContext("2d");//返回一个对象
var particles = [];
for( var i = 0; i < 666; i++ ) {
particles.push( {
x: Math.random()*window.innerWidth,
y: Math.random()*window.innerHeight,
vx: (Math.random()*1-.3), //横向随机
vy: (Math.random()*1-.3),//纵向随机
size: 1+Math.random()*2,
color: "#DDD"
} );
}
function timeUpdate(e){
context.clearRect(0, 0, window.innerWidth, window.innerHeight); //第一步先清理画布
var len = particles.length;
var particle;
for( var i = 0; i < len; i++ ) { //循环遍历所有的雪花
particle = particles;
particle.x += particle.vx;
particle.y += particle.vy;
//下面都是边界检查，防止雪花跑出屏幕
if(particle.x<=0 || particle.x>=window.innerWidth){
particle.vx *= -1;
}
if(particle.y<=0 || particle.y>=window.innerHeight){
particle.vy *= -1;
}
context.fillStyle = particle.color;//设置雪花为上面设置的#DDD
context.beginPath();//开始绘制
context.arc(particle.x,particle.y,particle.size,0,Math.PI*1.99,true);//绘制图形
context.closePath();//停止绘制
context.fill();//对所有绘制好的图形，进行上色
}
}
setInterval( timeUpdate, 40 );
</script>
</html>
你不设置CSS，搞毛。。。
<style type="text/css">
body {
background:#000;
margin:0;
padding:0;
}
html, body{
height:100%;
width:100%;
}
#myCanvas{
height:100%;
width:100%;
display: block;
}
</style>
页:
[1]