0 0 6 5 - Canvas粒子动画 - 只挖待填
本帖最后由 不二如是 于 2021-8-11 11:04 编辑一直在犹豫，是否介绍Canvas？？？
在59因涉及jQuery，所以挖了个坑。
而这次呢，是因为涉及JavaScript。
简单的Dom结构下，Js都绕不过去，更别提下面B格这么高的了
So，本帖只做展示分享，有缘在深入学习Canvas。。。（不要问我在何时）
Canvas是HTML5中一项非常非常重要的特性！
重要到可以独立作为一门语言去学习。。。
说的在露骨些，Canvas就是解决：
transition&animation代码太多的尴尬时刻
你可以讲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;
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 );
效果图：
**** Hidden Message *****
没错，善良如我决定从0 0 7 5 - 手把手带你玩儿Canvas 开始填坑。
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 我讲的QML也支持H5的canvas对象，这玩意忒复杂了{:10_256:} 123 照样复制了 还是没有显示出来。。。-=- 向一朵朵鲜花 发表于 2017-3-16 17:41
照样复制了 还是没有显示出来。。。-=-
…发求助贴吧，看下代码+效果图 厉害了!!!!1
厉害了!!!!1 回复看帖 {:5_107:}
context.arc(particle.x,particle.y,particle.size,0,Math.PI*1.99,true);//绘制图形.
arc参数后面不能设置true.设置true就看不到了.
{:10_249:}还有一个错误.
vx vy在particle[]数组里.
particle.vx应该改为particle.vx。
vy同理~{:10_256:} 交作业~
<!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;
practicle.x += practicles.vx;
practicle.y += practicles.vy;
if(practicle.x <= 0 || practicle.x >= window.innerWidth)
{
practicles.vx *= -1;
}
if(practicle.y <= 0 || practicle.y >= window.innerHeight)
{
practicles.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>
看看效果 看看
{:7_146:} 闪瞎了闪瞎了 666 没有效果嘞 a 666 RE: 0 0 6 5 - Canvas粒子动画 - 只挖待填 [修改] wow