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 日志相册贡献荣誉积分 129 狗仔卡头像被屏蔽	发表于 2020-4-2 03:06:40 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报显身卡

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

浏览过的版块