HBuilder X 绘制圣诞树代码示例 - 用 Canvas 实现节日气氛 - 常规

以下是一个在 HBuilder X 中绘制圣诞树的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>圣诞树</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id='treeCanvas' width='400' height='400'></canvas>
    <script>
        var canvas = document.getElementById('treeCanvas');
        var ctx = canvas.getContext('2d');

        function drawTree(x, y, width, height) {
            // 绘制树干
            ctx.fillStyle = '#654321';
            ctx.fillRect(x + width / 2 - width / 10, y + height / 2, width / 5, height / 2);

            // 绘制树冠
            ctx.fillStyle = '#008000';
            ctx.beginPath();
            ctx.moveTo(x, y + height / 2);
            ctx.lineTo(x + width, y + height / 2);
            ctx.lineTo(x + width / 2, y);
            ctx.closePath();
            ctx.fill();
        }

        function drawStar(x, y, radius, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.moveTo(x, y - radius);

            for (var i = 0; i < 9; i++) {
                var angle = i * Math.PI / 5 - Math.PI / 10;
                var innerRadius = i % 2 === 0 ? radius / 2 : radius;
                ctx.lineTo(x + innerRadius * Math.sin(angle), y - innerRadius * Math.cos(angle));
            }

            ctx.closePath();
            ctx.fill();
        }

        // 绘制圣诞树
        drawTree(150, 200, 100, 200);

        // 绘制星星
        drawStar(200, 100, 20, '#FFD700');
    </script>
</body>
</html>

此代码使用HTML5的Canvas元素和JavaScript绘制了一个简单的圣诞树。在Canvas上下文中，使用fillRect方法绘制树干，使用fill方法绘制树冠。另外，使用drawStar函数绘制了一个黄色的星星。你可以根据需要调整绘制的位置和尺寸。