文章目录
1. 前言
一年一度的圣诞节和考研即将来临，那么这篇文章将用到前端三大剑客
HTML + CSS + JS
来实现动态圣诞树！
2. 效果展示
在手机上还可以通过左右滑动来控制雪花的方向哦！
3. 准备
🍑 下载编译器
这里的话推荐使用 VScode（方便！）
🍑 下载插件
Auto Rename Tag
：改善标签后自动完善
Chinses语言包
：把编译器语言换成中文（默认英文）
open in browser
：让代码在网页中打开，快捷键
Alt + B
4. 源码
以下源码都已经准备好了，大家复制即可。
🍑 HTML
代码示例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CodePen - Christmas Tree and Snow</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><linkrel="stylesheet"href="./style.css"></head><body><!-- partial:index.partial.html --><canvasid="canvas"></canvas><divclass="overlay"></div><!-- partial --><scriptsrc="./script.js"></script></body></html>
🍑 JS
代码示例
// Particle LibfunctionParticle(x, y, speed, angle){this.x = x;this.y = y;this.vx = Math.cos(angle ||0)*(speed ||0);this.vy = Math.sin(angle ||0)*(speed ||0);}Particle.prototype.updatePosition=function(){this.x +=this.vx;this.y +=this.vy;};Particle.prototype.draw=function(ctx){
ctx.fillStyle =this.color;
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,2* Math.PI,false);
ctx.fill();};// Snowingvar numOfSnowParticles =100;var snowParticles =[];var windFromLeft =false;var windFromRight =false;functioncreateSnowParticles(){let particle =newParticle(Math.random()* screenWidth,-10,1,2* Math.PI/2* Math.random());
particle.originalX = particle.x;
particle.originalY = particle.y;
particle.radius =1+ Math.random()*2;
particle.angle =0;
particle.speed =.05;
particle.isDead =false;
particle.color ="white";
snowParticles.push(particle);}functiondrawSnowFrame(){for(var i =0; i < snowParticles.length; i++){let particle = snowParticles[i];if(!particle.isDead){
particle.updatePosition();if(!windFromLeft &&!windFromRight){
particle.x = particle.originalX + Math.sin(particle.angle)*10;}elseif(windFromLeft){
particle.x +=2;
particle.originalX = particle.x;}elseif(windFromRight){
particle.x -=2;
particle.originalX = particle.x;}
particle.y +=.1;
particle.angle += particle.speed;checkIfParticleTouchesADeadParticle(i);checkIfParticleHitsGround(particle);}
particle.draw(context);}}functioncheckIfParticleHitsGround(particle){if(particle.y + particle.radius > screenHeight){
particle.y = screenHeight - particle.radius;
particle.isDead =true;}}functioncheckIfParticleTouchesADeadParticle(index){for(var i = index +1; i < snowParticles.length; i++){if(snowParticles[i].isDead){let dx = snowParticles[index].x - snowParticles[i].x;let dy = snowParticles[index].y - snowParticles[i].y;let distance = Math.sqrt(Math.pow(dx,2)+ Math.pow(dy,2));if(distance <= snowParticles[index].radius + snowParticles[i].radius){
snowParticles[index].isDead =true;}}}}
document.addEventListener('touchstart', handleTouchStart,false);
document.addEventListener('touchmove', handleTouchMove,false);var xDown =null;var yDown =null;functionhandleTouchStart(evt){
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;};functionhandleTouchMove(evt){if(!xDown ||!yDown){return;}var xUp = evt.touches[0].clientX;var yUp = evt.touches[0].clientY;var xDiff = xDown - xUp;var yDiff = yDown - yUp;if(Math.abs(xDiff)> Math.abs(yDiff)){if(xDiff >0){
windFromRight =true;
windFromLeft =false;}else{
windFromLeft =true;
windFromRight =false;}}else{
windFromLeft = windFromRight =false;}
xDown =null;
yDown =null;};// Tree var treeParticles =[];var treeColors =['#199642','#E44822','#40B8E2','#F7D231'];functiondrawTreeFrame(){for(var i =0; i < treeParticles.length; i++){
treeParticles[i].draw(context);
treeParticles[i].radius =1+ Math.random()*3;}if(treeParticles.length >0){drawStar(centerX, screenHeight *.2,5,20,10);}}functiongetPixelData(imageData, x, y){let basePosition =(screenWidth * y + x)*4;return{r: imageData.data[basePosition],g: imageData.data[basePosition +1],b: imageData.data[basePosition +2],a: imageData.data[basePosition +3]};}functiondrawStar(cx, cy, spikes, outerRadius, innerRadius){var rot = Math.PI/2*3;var x = cx;var y = cy;var step = Math.PI/ spikes;
context.beginPath();
context.moveTo(cx, cy - outerRadius);for(i =0; i < spikes; i++){
x = cx + Math.cos(rot)* outerRadius;
y = cy + Math.sin(rot)* outerRadius;
context.lineTo(x, y);
rot += step;
x = cx + Math.cos(rot)* innerRadius;
y = cy + Math.sin(rot)* innerRadius;
context.lineTo(x, y);
rot += step;}
context.lineTo(cx, cy - outerRadius);
context.closePath();
context.lineWidth =5;
context.strokeStyle ='yellow';
context.stroke();
context.fillStyle ='lightyellow';
context.fill();}functioninitTree(text){
context.clearRect(0,0, screenWidth, screenHeight);
context.moveTo(centerX, screenHeight *.2);
context.lineTo(centerX -100, centerY +100);
context.lineTo(centerX +100, centerY +100);
context.fill();var imageData = context.getImageData(0,0, screenWidth, screenHeight);
context.clearRect(0,0, screenWidth, screenHeight);
treeParticles.length =0;for(var i =0; i < screenWidth; i +=10){for(j =0; j < screenHeight; j +=10){let pixelData =getPixelData(imageData, i, j);if(pixelData.a >0){let particle =newParticle(i, j);
particle.color = treeColors[Math.floor(Math.random()*5)];
particle.radius =1+ Math.random()*3;
treeParticles.push(particle);}}}}//let canvas = document.querySelector('#canvas');let context = canvas.getContext('2d');let screenWidth = canvas.width = window.innerWidth;let screenHeight = canvas.height = window.innerHeight;var centerX = screenWidth *.5;var centerY = screenHeight *.5;drawFrame();functiondrawFrame(){
context.clearRect(0,0, screenWidth, screenHeight);
context.fillStyle ="black";
context.fillRect(0,0, screenWidth, screenHeight);
context.fillStyle ="white";
context.font ="bold 50px Kaushan Script";
context.textAlign ="center";
context.fillText("Merry Christmas", centerX, screenHeight *.8);drawTreeFrame();drawSnowFrame();requestAnimationFrame(drawFrame);}initTree('hello world');setInterval(()=>{createSnowParticles();},100);
🍑 CSS
代码示例
@importurl("https://fonts.googleapis.com/css?family=Great+Vibes|Kaushan+Script");body{margin: 0;}.overlay{position: fixed;top: 0;left: 0;z-index: 10;color: white;width: 100%;text-align: center;padding: 5px;font-family:"Avenir","Helvetica";}
5. 结语
属于 2022 的时间，不知不觉进入了倒计时！
准备多时的 “马拉松”，即将抵达终点！
时光不负有心人，星光不负赶路人。
祝大家圣诞快乐，也愿各位考研人一战成硕！！！
本文转载自: https://blog.csdn.net/m0_63325890/article/details/128421686
版权归原作者 Albert Edison 所有， 如有侵权，请联系我们删除。
版权归原作者 Albert Edison 所有， 如有侵权，请联系我们删除。