文章目录

  • 1. 前言
  • 2. 效果展示
  • 3. 准备
    • 下载编译器
    • 下载插件
  • 4. 源码
    • HTML
    • JS
    • CSS
  • 5. 结语

1. 前言

一年一度的圣诞节和考研即将来临，那么这篇文章将用到前端三大剑客 HTML + CSS + JS 来实现动态圣诞树！

2. 效果展示

在手机上还可以通过左右滑动来控制雪花的方向哦！

3. 准备

下载编译器

这里的话推荐使用 VScode（方便！）

下载插件

Auto Rename Tag：改善标签后自动完善

Chinses语言包：把编译器语言换成中文（默认英文）

open in browser：让代码在网页中打开，快捷键 Alt + B

4. 源码

以下源码都已经准备好了，大家复制即可。

HTML

代码示例

<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>CodePen - Christmas Tree and Snow</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel="stylesheet" href="./style.css"></head><body><canvas id="canvas"></canvas><div class="overlay"></div><scriptsrc="./script.js"></script></body></html>

JS

代码示例

// Particle Libfunction Particle(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;function createSnowParticles() {let particle = new Particle(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);}function drawSnowFrame() {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;} else if (windFromLeft) {particle.x += 2;particle.originalX = particle.x;} else if (windFromRight) {particle.x -= 2;particle.originalX = particle.x;}particle.y += .1;particle.angle += particle.speed;checkIfParticleTouchesADeadParticle(i);checkIfParticleHitsGround(particle);}particle.draw(context);}}function checkIfParticleHitsGround(particle) {if (particle.y + particle.radius > screenHeight) {particle.y = screenHeight - particle.radius;particle.isDead = true;}}function checkIfParticleTouchesADeadParticle(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;function handleTouchStart(evt) {xDown = evt.touches[0].clientX;yDown = evt.touches[0].clientY;};function handleTouchMove(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'];function drawTreeFrame() {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);}}function getPixelData(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] };}function drawStar(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();}function initTree(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 = new Particle(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();function drawFrame() {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

代码示例

@import url("https://fonts.googleapis.com/css" />);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 的时间，不知不觉进入了倒计时！

准备多时的 “马拉松”，即将抵达终点！

时光不负有心人，星光不负赶路人。

祝大家圣诞快乐，也愿各位考研人一战成硕！！！