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

以上是 JavaScript canvas实现雪花随机动态飘落 的全部内容, 来源链接: utcz.com/z/312159.html

回到顶部