颇黎 发表于 2019-4-11 15:38:48

学习HTML5中

璀璨的天河 发表于 2019-5-5 13:02:29

123

baige 发表于 2019-11-3 17:51:08

想看

suweixuan1998 发表于 2020-1-12 10:46:23

复制了老师的代码，但是并不能生成雪花的效果，参考了前面师兄的代码，修改了一下就可以了。
具体修改在备注中有注释，供后来者参考。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">
      *{
            margin: 0;
            padding: 0;
      }
      html,body{
            height: 100%;
      }
      #firstCanvas{
            background-color: #000;

      }
    </style>

</head>
<body>
<canvas id="firstCanvas" width="999" height="666">大兄弟你的浏览器不支持Canvas！！！</canvas>
<script type="text/javascript">
    var canvas=document.getElementById("firstCanvas");
    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()-.5),
            vy: (Math.random()-.5),
            size: 1+Math.random()*3,
            color: "#DDD"
      } )
    }
    function timeUpdate(){
      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 += particles.vx;//此处particle.vx应改为particles.vx
            particle.y += particles.vy;//此处particle.vy应改为particles.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;
            context.beginPath();
            context.arc(particle.x,particle.y,particle.size,0,Math.PI*1.99);//true应该去掉
            context.closePath();
            context.fill();
      }
    }
    setInterval( timeUpdate, 40 );
</script>
</body>
</html>

Qmh 发表于 2020-2-7 11:48:11

{:10_257:}

weiter 发表于 2020-2-7 18:44:10

谢谢大佬

China宇超 发表于 2020-3-29 20:10:20

。。

小脑斧 发表于 2020-3-31 19:13:57

直接复制不二老师的代码出不来效果的可以看我的分析
图1红色框圈住的名字必须一致（可以命名其他，但必须一致），图2绿色框圈住的名字也必须一致；蓝色框是缺少的代码，剩下看图更改，注意style里面也要添加内容
图1
图2
我的效果图

我的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粒子动画</title>
    <style type="text/css">
      *{
            margin: 0;
            padding: 0;
      }
      html,body{
            height: 100%;
      }
      #firstCanvas{
            background-color: #7700ff;
      }
    </style>

</head>
<body>
    <canvas id="firstCanvas" width="999" height="666">大兄弟你的浏览器不支持Canvas！！！</canvas>

    <script type="text/javascript" >
      var canvas = document.getElementById("firstCanvas");//调用Canvas元素
      var context=canvas.getContext("2d");//返回一个对象
      var parcticles = [];
      for(var i = 0; i < 666; i++ )
      {
            parcticles.push( {
                x: Math.random() * window.innerWidth,
                y: Math.random() * window.innerHeight,
                vx: (Math.random()-.3), //横向随机
                vy: (Math.random()-.3),//纵向随机
                size: 1 + Math.random()*3,
                color: "#DDD"
            } );
      }
      function timeUpdate(){
            context.clearRect(0, 0, window.innerWidth, window.innerHeight); //第一步先清理画布
            var len = parcticles.length;
            var parcticle;
            for( var i = 0; i < len; i++ ) { //循环遍历所有的雪花
                var parcticle = parcticles;
                parcticle.x += parcticles.vx;
                parcticle.y += parcticles.vy;
                //下面都是边界检查，防止雪花跑出屏幕
                if(parcticle.x<=0 || parcticle.x>=window.innerWidth){
                  parcticles.vx *= -1;
                }
                if(parcticle.y<=0 || parcticle.y>=window.innerHeight){
                  parcticles.vy *= -1;
                }
                context.beginPath();//开始绘制//
                context.arc(parcticle.x,parcticle.y,parcticle.size,0,Math.PI*1.99);//绘制图形
                context.closePath();//停止绘制
                context.fillStyle = parcticle.color;//设置雪花为上面设置的#DDD
                context.fill();//对所有绘制好的图形，进行上色
            }
      }
      setInterval( timeUpdate, 40 );
    </script>
</body>
</html>


287187056 发表于 2020-4-2 03:06:40

七世 发表于 2020-4-10 11:35:30

效果图

GX123 发表于 2020-5-19 16:59:20

1

tianyuan 发表于 2020-5-31 22:41:04

{:10_277:}

不可复制的我 发表于 2020-6-3 16:40:08

a

1041556532 发表于 2020-6-14 07:44:35

没效果呢

落寞少年 发表于 2020-8-20 17:49:19

11

liuzhengyuan 发表于 2020-9-20 11:23:37

kk

紫陌欧 发表于 2020-12-14 20:36:07

我想知道。

ainz42 发表于 2021-3-29 17:25:41

学习

雪月圣雕 发表于 2021-4-9 08:08:22

66666666666666666

Rydia 发表于 2021-5-22 17:47:28

123
页: 1 [2] 3
查看完整版本: 0 0 6 5 - Canvas粒子动画 - 只挖待填