Heim > Artikel > Web-Frontend > Canvas erzielt einen zufälligen dynamischen Falleffekt von Schneeflocken (Codebeispiel)
Canvas erzielt einen zufälligen dynamischen Falleffekt von Schneeflocken (Codebeispiel)
- 青灯夜游nach vorne
- 2020-06-17 10:24:132856Durchsuche
In diesem Artikel erfahren Sie, wie Sie mit Canvas den zufälligen und dynamischen Falleffekt von Schneeflocken erzielen. Der Beispielcode im Artikel wird ausführlich vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Verwenden Sie Canvas, um zufälliges und dynamisches Fallen von Schneeflocken zu realisieren. Der Code lautet wie folgt
<!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>Dynamisches Rendering:
Für weitere coole CSS3-, HTML5-, jQuery- und Javascript-Spezialeffekte wird empfohlen, die JS-Spezialeffekt-Website zu besuchen!
Das obige ist der detaillierte Inhalt vonCanvas erzielt einen zufälligen dynamischen Falleffekt von Schneeflocken (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!