js实现canvas下雪雪花飞舞动画效果代码
代码语言:html
所属分类:粒子
代码描述:js实现canvas下雪雪花飞舞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { height: 100vh; width: 100vw; background-image: url('//repo.bfw.wiki/bfwrepo/image/5df0355083a46.png'); background-size: cover; margin: 0px; overflow: hidden; } </style> </head> <body> <canvas id='canv'></canvas> <script> var c = document.getElementById('canv'), $ = c.getContext("2d"); var w = c.width = window.innerWidth, h = c.height = window.innerHeight; Snowy(); function Snowy() { var snow, arr = []; var num = 600, tsc = 1, sp = 1; var sc = 1.3, t = 0, mv = 20, min = 1; for (var i = 0; i < num; ++i) { snow = new Flake(); snow.y = Math.random() * (h + 50); snow.x = Math.random() * w; snow.t = Math.random() * (Math.PI * 2); snow.sz = 100 / (10 + Math.random() * 100) * sc; snow.sp = Math.pow(snow.sz * .8, 2) * .15 * sp; snow.sp = snow.sp < min ? min: snow.sp; arr.push(snow); } go(); function go() { window.requestAnimationFrame(go); $.clearRect(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0