鱼C论坛

 找回密码
 立即注册
查看: 2789|回复: 1

[已解决]65课,是放错了还是放错了。。

[复制链接]
发表于 2017-3-17 16:28:34 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Canvas</title>
  6.     <style type="text/css">

  7.     </style>
  8. </head>
  9. <body>
  10. <canvas id="firstCanvas" width="999" height="666">大兄弟你的浏览器不支持Canvas!!!</canvas>
  11. </body>
  12. <script type="text/javascript">
  13.     var canvas=document.getElementById("firstCanvas");//调用Canvas元素
  14.     var context=canvas.getContext("2d");//返回一个对象
  15.     var particles = [];
  16.     for( var i = 0; i < 666; i++ ) {
  17.         particles.push( {
  18.             x: Math.random()*window.innerWidth,
  19.             y: Math.random()*window.innerHeight,
  20.             vx: (Math.random()*1-.3), //横向随机
  21.             vy: (Math.random()*1-.3),//纵向随机
  22.             size: 1+Math.random()*2,
  23.             color: "#DDD"
  24.         } );
  25.     }
  26.     function timeUpdate(e){
  27.         context.clearRect(0, 0, window.innerWidth, window.innerHeight); //第一步先清理画布
  28.         var len = particles.length;
  29.         var particle;
  30.         for( var i = 0; i < len; i++ ) { //循环遍历所有的雪花
  31.             particle = particles[i];
  32.             particle.x += particle.vx;
  33.             particle.y += particle.vy;
  34.             //下面都是边界检查,防止雪花跑出屏幕
  35.             if(particle.x<=0 || particle.x>=window.innerWidth){
  36.                 particle.vx *= -1;
  37.             }
  38.             if(particle.y<=0 || particle.y>=window.innerHeight){
  39.                 particle.vy *= -1;
  40.             }
  41.             context.fillStyle = particle.color;//设置雪花为上面设置的#DDD
  42.             context.beginPath();//开始绘制
  43.             context.arc(particle.x,particle.y,particle.size,0,Math.PI*1.99,true);//绘制图形
  44.             context.closePath();//停止绘制
  45.             context.fill();//对所有绘制好的图形,进行上色
  46.         }
  47.     }
  48.     setInterval( timeUpdate, 40 );
  49. </script>
  50. </html>
复制代码
最佳答案
2017-3-18 10:14:04

你不设置CSS,搞毛。。。

  1. <style type="text/css">
  2.         body {
  3.             background:#000;
  4.             margin:0;
  5.             padding:0;
  6.         }
  7.         html, body{
  8.             height:100%;
  9.             width:100%;
  10.         }
  11.         #myCanvas{
  12.             height:100%;
  13.             width:100%;
  14.             display: block;
  15.         }
  16.     </style>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-18 10:14:04 | 显示全部楼层    本楼为最佳答案   

你不设置CSS,搞毛。。。

  1. <style type="text/css">
  2.         body {
  3.             background:#000;
  4.             margin:0;
  5.             padding:0;
  6.         }
  7.         html, body{
  8.             height:100%;
  9.             width:100%;
  10.         }
  11.         #myCanvas{
  12.             height:100%;
  13.             width:100%;
  14.             display: block;
  15.         }
  16.     </style>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 16:11

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表