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

不二如是 · 发表于 2017-3-7 11:22:39

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

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

x

本帖最后由不二如是于 2021-8-11 11:04 编辑

一直在犹豫，是否介绍Canvas？？？

在59因涉及jQuery，所以挖了个坑。

而这次呢，是因为涉及JavaScript。

简单的Dom结构下，Js都绕不过去，更别提下面B格这么高的了

So，本帖只做展示分享，有缘在深入学习Canvas。。。（不要问我在何时）

Canvas是HTML5中一项非常非常重要的特性！

重要到可以独立作为一门语言去学习。。。

说的在露骨些，Canvas就是解决：

[b]

transition&animation代码太多的尴尬时刻

[/b]

你可以讲Canvas理解为小时候儿玩的翻页动画

当飞速的纸页的翻动时，就行成了动画

Canvas就相当于一个白本子，不停的绘制不同图案后，在极短的时间内连续播放，就形成了动画。

好吧，概念就扯到这里，开始制作一个简单的初雪动画！

先在HTML代码中创建一个canvas的Dom结构

<!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>
</html>

啥效果也没有。。。

上面那个提示，纯属娱乐，但也有点用。

只有在你的浏览器真的不支持情况下，才会显示，给你看看Canvas支持哪些浏览器：

好吧，接下来就要加入Js了，在body标签下，创建雪花（如有不适，自行关闭网页）

<script type="text/javascript">
        var canvas=document.getElementById("firstCanvas");//调用Canvas元素
        var context=canvas.getContext("2d");//返回一个对象
            </script>

由于Canvas本身没有绘图能力，只有调用getContext（）方法来绘制对象。

后续的制作雪花，都在context中来搞。

创建雪花前，需要创建个数组保存雪花信息

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"
        } );
        }

用for循环随机生成666个雪花（小球），每个雪花随机出现在屏幕上。

随机位置通过窗口高度，宽度来计算，颜色偏灰#DDD。

现在仍然是看不见滴～

相当于咱们只是创建了666个虚拟描述雪花。

只有在画布中，一个一个的绘制，才能看到哦

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 );

效果图：

游客，如果您要查看本帖隐藏内容请回复

没错，善良如我决定从0 0 7 5 - 手把手带你玩儿Canvas 开始填坑。

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

alltolove · 发表于 2017-3-7 12:20:30

我讲的QML也支持H5的canvas对象，这玩意忒复杂了

163areocraft · 发表于 2017-3-7 17:42:27

向一朵朵鲜花 · 发表于 2017-3-16 17:41:06

照样复制了还是没有显示出来。。。-=-

不二如是 · 发表于 2017-3-17 07:50:19

向一朵朵鲜花发表于 2017-3-16 17:41
照样复制了还是没有显示出来。。。-=-

…发求助贴吧，看下代码+效果图

dreamdnj · 发表于 2017-4-25 10:43:56

厉害了!!!!1

xl7613 · 发表于 2017-8-4 17:14:41

厉害了!!!!1

aswyamato1989 · 发表于 2017-8-6 11:28:11

回复看帖

auyhin丶 · 发表于 2017-8-15 12:32:58

context.arc(particle.x,particle.y,particle.size,0,Math.PI*1.99,true);//绘制图形.
arc参数后面不能设置true.设置true就看不到了.

还有一个错误.
vx vy在particle[]数组里.

particle.vx应该改为particle[i].vx。
vy同理~

auyhin丶 · 发表于 2017-8-15 12:35:27

交作业~

<!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 practicles = [];
        for(var i = 0; i < 666; i++)
        {
            practicles.push({
                x: Math.random() * window.innerWidth,
                y: Math.random() * window.innerHeight,
                vx: (Math.random() - 0.5),
                vy: (Math.random() - 0.5),
                size: 1 + Math.random() * 3,
                color: "#ddd"
            })
        }
        function timeUpdate()
        {
            context.clearRect(0, 0, window.innerWidth, window.innerHeight);
            var len = practicles.length;
            var practicle;
            for( var i = 0; i < len; i++)
            {
                var practicle = practicles[i];
                practicle.x += practicles[i].vx;
                practicle.y += practicles[i].vy;
                if(practicle.x <= 0 || practicle.x >= window.innerWidth)
                {
                    practicles[i].vx *= -1;
                }
                if(practicle.y <= 0 || practicle.y >= window.innerHeight)
                {
                    practicles[i].vy *= -1;
                }

                context.beginPath();
                context.arc(practicle.x, practicle.y, practicle.size, 0, Math.PI * 1.99);
                context.closePath();
                context.fillStyle = practicle.color;
                context.fill();
            }
        }
        setInterval(timeUpdate, 40);
    </script>

</body>
</html>

Lee.C · 发表于 2017-9-1 17:30:59

看看效果

还差几 · 发表于 2017-9-3 11:38:35

看看

floride · 发表于 2018-8-11 18:58:59

a211827754 · 发表于 2018-8-22 23:54:58

闪瞎了闪瞎了

我爱鱼C！ · 发表于 2018-8-27 14:55:00

旭儿大大 · 发表于 2018-9-3 21:59:19

没有效果嘞

陈俊杰 · 发表于 2018-9-21 16:07:50

想成大神 · 发表于 2018-12-14 23:31:44

莫希 · 发表于 2019-1-13 21:03:01

RE: 0 0 6 5 - Canvas粒子动画 - 只挖待填 [修改]

TCY · 发表于 2019-2-15 09:30:33

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

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

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

评分

本帖被以下淘专辑推荐:

点评

评分