|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
- <!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[i];
- 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>
复制代码
|
|