0 0 6 5 - Canvas粒子动画 - 只挖待填

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

学习HTML5中

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

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[i];
            particle.x += particles[i].vx;//此处particle.vx应改为particles[i].vx
            particle.y += particles[i].vy;//此处particle.vy应改为particles[i].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

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

谢谢大佬

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

。。

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

直接复制不二老师的代码出不来效果的可以看我的分析
图1红色框圈住的名字必须一致（可以命名其他，但必须一致），图2绿色框圈住的名字也必须一致；蓝色框是缺少的代码[i]，剩下看图更改，注意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[i];
                parcticle.x += parcticles[i].vx;
                parcticle.y += parcticles[i].vy;
                //下面都是边界检查，防止雪花跑出屏幕
                if(parcticle.x<=0 || parcticle.x>=window.innerWidth){
                    parcticles[i].vx *= -1;
                }
                if(parcticle.y<=0 || parcticle.y>=window.innerHeight){
                    parcticles[i].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

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

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

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

没效果呢

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

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

紫陌欧 · 发表于 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

账号		自动登录	找回密码
密码			立即注册

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-2 03:06:40 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

[庖丁解牛] 0 0 6 5 - Canvas粒子动画 - 只挖待填