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粒子动画 - 只挖待填

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

评分

本帖被以下淘专辑推荐:

点评

评分

浏览过的版块