300行HTML+CSS+JS代码实现动态圣诞树

文章目录

• 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

      代码示例

          CodePen - Christmas Tree and Snow    

      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  screenHeight) {    particle.y = screenHeight - particle.radius;    particle.isDead = true;  }}function checkIfParticleTouchesADeadParticle(index) {  for (var i = index + 1; i  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  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  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?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 的时间，不知不觉进入了倒计时！

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

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

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