特效描述:利用HTML5实现 勾股树 植物生长 动画特效。利用HTML5实现勾股树植物生长动画特效
代码结构
1. HTML代码
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d", { alpha: false });
let vw = canvas.width = window.innerWidth;
let vh = canvas.height = window.innerHeight;
// let boxSize = Math.min(vw / 6, vh / 4);
let boxSize = 80;
const maxLevel = 10;
const roundTo = 1000;
const color1 = { h: 69, s: 75, l: 51 };
const color2 = { h: 288, s: 98, l: 17 };
const colors = getColors(color1, color2, maxLevel + 2);
const mouse = {
x: vw / 2,
y: vh / 2
};
let count = 0;
let lean = 0;
let scale = 0;
let resized = false;
let requestId = null;
let x = (vw - boxSize) / 2;
let y = vh;
//
// CALC BRANCHES
// ================================================================================
const calcBranches = (function()