自助下单小程序_JavaScript canvas完成雪花随机动态

摘要: JavaScript canvas完成小雪花任意动态性飘落 本文关键为大伙儿详尽详细介绍了JavaScript canvas完成小雪花任意动态性飘落,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价...

JavaScript canvas实现雪花随机动态飘落       这篇文章主要为大家详细介绍了JavaScript canvas实现雪花随机动态飘落,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

用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 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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:html网页模板