js画布实现下雪效果

之前使用css实现了下雪效果，也对比了前端多种实现动画的方法（链接见文末）
下面使用js和canvas的方法配合requestAnimationFrame实现一个简单的下雪效果，代码十分精简。

代码

<body style="margin: 0;"><canvas id="cvs" style="background-color: black"></canvas>
</body>
<script>const cvs = document.querySelector('#cvs')const ctx = cvs.getContext('2d')// 全屏黑夜const { clientWidth: width, clientHeight: height } = document.documentElementcvs.width = widthcvs.height = heightctx.fillStyle = '#ffffff'// 雪球位置const bgColors = Array.from(new Array(400)).map(v => {return {x: Math.random() * width,y: Math.random() * height,step: Math.random() * 2 + 0.5}})const render = () => {ctx.clearRect(0, 0, width, height)ctx.beginPath()bgColors.forEach(v => {v.y = v.y > height ? 0 : (v.y + v.step)ctx.rect(v.x, v.y, 3, 3)})ctx.fill()requestAnimationFrame(render)}render()
</script>

效果：

（因为不会截取gif动图）

搞了个收费的gif。。凑合看

css方法实现下雪、下雨、落叶效果：
https://blog.csdn.net/qq_37669585/article/details/122185182?spm=1001.2014.3001.5501
requestAnimationFrame、前端动画实现方式总结与优化（大全）：
https://blog.csdn.net/qq_37669585/article/details/127488681?spm=1001.2014.3001.5501

js画布实现下雪效果相关推荐

canvas下雪效果(原生js)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
20多行js实现canvas雪夜下雪效果
目录前言实现canvas雪夜下雪效果 1.设置canvas标签的id为cvs,设置背景颜色为黑色 2.设置body外边距为0 3.通过获取DOM元素获得画板 4.指定二维绘图 5.设置宽高填满页面 ...
java喷泉编码_好程序员Java教程分享使用JS实现简单喷泉效果
原标题:好程序员Java教程分享使用JS实现简单喷泉效果好程序员Java教程分享使用JS实现简单喷泉效果,最近,在教学生使用JS的基本操作,为了练习JS的基本作用,特地写了一个喷泉效果,代码如下: ...
java喷泉编码_Java干货分享使用JS实现简单喷泉效果
Java干货分享使用JS实现简单喷泉效果,最近,在教学生使用JS的基本操作,为了练习JS的基本作用,特地写了一个喷泉效果,代码如下: 页面代码: body{ margin: 0px; } Partic ...
python下雪的实例_javascript实现下雪效果【实例代码】
原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 ...
JAVA圣诞代码_[Java教程]【Merry Christmas】圣诞节，给博客添加浪漫的下雪效果！...
[Java教程][Merry Christmas]圣诞节,给博客添加浪漫的下雪效果! 0 2012-12-25 15:00:20 一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远! ...
用html5写一段文字画布中,10个让人惊叹的HTML5画布(canvas)技术效果
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言由于公司产品的活动,需要模拟类似下雪 ...
前段JS绘制动态海浪效果
细腻复杂动画的制作一般要通过canvas来动态绘制,需要具备一定的算法基础. 以下js是模拟海浪效果的算法(可直接使用),分享给大家. <div id="wave" styl ...

js画布实现下雪效果

代码

效果：

相关文章

js画布实现下雪效果相关推荐

最新文章

热门文章