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

02-27 阅读 0评论

文章目录

1. 前言
2. 效果展示
3. 准备

🍑 下载编译器
🍑 下载插件
4. 源码

🍑 HTML
🍑 JS
🍑 CSS

5. 结语

1. 前言

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

$300行HTML+CSS+JS代码实现动态圣诞树,300行HTML+CSS+JS代码实现动态圣诞树,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,前端,.com,第1张$

（图片来源网络，侵删）

2. 效果展示

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

3. 准备

🍑 下载编译器

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

🍑 下载插件

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

（图片来源网络，侵删）

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

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

4. 源码

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

（图片来源网络，侵删）

🍑 HTML

代码示例



  
  CodePen - Christmas Tree and Snow

🍑 JS

代码示例

// Particle Lib
function 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();
};
// Snowing
var 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";
}