用canvas实现雪花随机动态飘落,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body{ margin: 0; padding: 0; } canvas{ background: #000; } </style> <body> <canvas id = "snow"> </canvas> <script> var canvas = document.getElementById('snow'); var context = canvas.getContext('2d'); // 获得可视区的宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow(){ context.save(); // 开启路径 context.beginPath(); // 移动画布,确定雪花终点为中心点 context.translate(100,100); //起点 context.moveTo(-20,0); // 终点 context.lineTo(20,0); // 线变成白色 context.strokeStyle = '#fff'; // 线变粗 context.lineWidth = 10; // 线变圆头 context.lineCap = 'round'; context.stroke(); // 角度转弧度 var disX = Math.sin(30*Math.PI/180)*20; var disY = Math.sin(60*Math.PI/180)*20; // 画第二条线,左下到右上的线 context.moveTo(-disX,disY); context.lineTo(disX,-disY); // 画第三条线 context.moveTo(-disX,-disY); context.lineTo(disX,disY); context.stroke(); context.restore(); } // snow(); //生成雪花的构造函数 function Snow(x,y,scale,rotate,speedX,speedY,speedR){ this.x = x; this.y = y; this.scale = scale; this.rotate = rotate; this.speedX = speedX; this.speedY = speedY; this.speedR = speedR; // 渲染雪花 this.render = function(){ context.save(); context.beginPath(); context.translate(this.x,this.y); context.scale(this.scale,this.scale); context.rotate(this.rotate*Math.PI/180); context.moveTo(-20,0); context.lineTo(20,0); context.strokeStyle = '#fff'; context.lineWidth = 10; context.lineCap = 'round'; context.stroke(); var disX = Math.sin(30*Math.PI/180)*20; var disY = Math.sin(60*Math.PI/180)*20; context.moveTo(-disX,disY); context.lineTo(disX,-disY); context.moveTo(-disX,-disY); context.lineTo(disX,disY); context.stroke(); context.restore(); } } // var snow = new Snow(50,50,1,10,10,10,10); // snow.render(); // 存储所有生成的雪花 var snowArray = []; // 生成雪花 function init(){ var len = 100; for(var i = 0;i<len;i++){ var x = Math.random()*canvas.width; var scale = Math.random()+0.5; var rotate = Math.random()*60; var speedX = Math.random()+1 var speedY = Math.random()+5; var speedR = Math.random()*4+2; // var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR); // snow.render(); (function(x,y,scale,rotate,speedX,speedY,speedR){ setTimeout(function(){ var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR); snow.render(); snowArray.push(snow); },Math.random()*8000); })(x,0,scale,rotate,speedX,speedY,speedR); }snowing(); }init(); // 动起来 function snowing(){ setInterval(function(){ //先清除 context.clearRect(0,0,canvas.width,canvas.height); for(var i = 0;i < snowArray.length;i++){ snowArray[i].x = (snowArray[i].x+snowArray[i].speedX)%canvas.width; snowArray[i].y = (snowArray[i].y+snowArray[i].speedY)%canvas.height; snowArray[i].rotate = (snowArray[i].rotate+snowArray[i].speedR)%60; snowArray[i].render(); } },30); } /** * sin60 = 对边/斜边 => 对边 = sin60*斜边 => y=sin60*半径(r); */ </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript canvas实现雪花随机动态飘落”评论...
更新动态
20240626
20240626
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]