圣誕樹是圣誕節(jié)的象征之一，而在網(wǎng)頁中，我們也可以通過js和css來制作一個漂亮的圣誕樹。
首先，我們需要創(chuàng)建一個html頁面，并引入js和css文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣誕樹</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="tree"></canvas> <script src="script.js"></script> </body> </html>
接著，在js文件中編寫產(chǎn)生圣誕樹的代碼：
var canvas = document.getElementById('tree');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
var pi = Math.PI;
// 設(shè)置畫布寬高
canvas.width = width;
canvas.height = height;
// 繪制三角形
function drawTriangle(x, y, w, h, color) {
var bottomX = x + w / 2;
var topX1 = x + w * 0.25;
var topX2 = x + w * 0.75;
var bottomY = y + h;
var topY = y;
ctx.beginPath();
ctx.moveTo(topX1, topY);
ctx.lineTo(bottomX, bottomY);
ctx.lineTo(topX2, topY);
ctx.fillStyle = color;
ctx.fill();
}
// 繪制圓形
function drawCircle(x, y, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, pi*2);
ctx.fillStyle = color;
ctx.fill();
}
// 繪制圣誕樹
function drawTree(x, y, w, h, color) {
// 繪制樹身
drawTriangle(x, y, w, h, color);
// 繪制樹枝
if (h >50) {
drawTree(x, y + h * 0.5, w * 0.75, h * 0.5, color);
drawTree(x + w * 0.25, y + h * 0.5, w * 0.5, h * 0.5, color);
drawTree(x + w * 0.125, y + h * 0.5, w * 0.25, h * 0.5, color);
} else {
// 繪制圓球
drawCircle(x + w / 2, y + h, w * 0.2, 'red');
}
}
//調(diào)用繪制函數(shù)
drawTree(width * 0.4, height * 0.05, width * 0.2, height * 0.6, 'green');最后，我們需要編寫css文件，設(shè)置canvas樣式：
#tree {
position: fixed;
top: 0;
left: 0;
z-index: -999;
}這樣，我們就成功地創(chuàng)建出了一個漂亮的圣誕樹。運(yùn)行頁面后，就可以看到圣誕樹在頁面上閃耀著，為用戶帶來了節(jié)日的喜悅。