您的位置：首页 > 其它

canvas:下雪

2019-07-07 22:33 99 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/xswlXAD/article/details/95039175

demo

HTML

[code]<body>
<canvas id="canvas" width="1000" height="750" style="background-color: gainsboro"></canvas>
</body>

JS 行为定义canvas的渲染

[code]<script>
(()=>{
document.addEventListener('DOMContentLoaded',function(){
//业务
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
let circles = [];

setInterval(function () {
genareteCircle();
},50);

setInterval(function () {
circleRun();
},16);
//生成雪花
function genareteCircle() {
let circle = {};
circle.x = Math.floor(Math.random()*canvas.width);
circle.y = Math.floor(Math.random()*canvas.height);
// circle.y = 0;
circle.r = Math.ceil(Math.random()* 10);
circle.deltay = 0;
// circle.r = 8;
circle.color = {};
circle.color.r = Math.floor(Math.random()*256);
circle.color.g = Math.floor(Math.random()*256);
circle.color.b = Math.floor(Math.random()*256);
circle.color.a = 1;
circles.push(circle);
}
// 雪花运动
function circleRun(){
ctx.clearRect(0,0,canvas.width,canvas.height);
circles.forEach(function (circle, index) {

//增量逐渐增加
circle.deltay++;

ctx.beginPath();
//绘制圆的圆心坐标逐渐增大（视觉上逐渐下降）
ctx.arc(circle.x,(circle.y+circle.deltay),(circle.r),0,Math.PI*2);
ctx.fillStyle = 'rgba('+circle.color.r+','+circle.color.g+','+circle.color.b+','+circle.color.a+')';
ctx.fill();
});
}
});
})();
</script>

哎呀，效果很抽象，但雪花的行为是有了，好不容易可以写写博客了，虽然差不多只有我自己看，😂

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航