master

分支 (1)

管理

管理

master

tree
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
    <style>
        body {
            background-color: #35d0d0;
            position: relative;
        }

        canvas {
            width: 100%;
            height: 100%;
            image-rendering: optimizeSpeed; /* 针对低像素设备 */
            image-rendering: -moz-crisp-edges; /* 针对 Firefox */
            image-rendering: -webkit-optimize-contrast; /* 针对 Webkit */
            image-rendering: optimize-contrast; /* 针对所有浏览器 */
            -ms-interpolation-mode: nearest-neighbor; /* 针对 IE */
        }
        button {
            position: absolute;
            display: inline-block;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            color: #fff;
            background-color: #007bff;
            border: 2px solid #007bff;
            border-radius: 30px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }

        button:hover {
            background-color: #0062cc;
        }
    </style>
</head>
<body>
<button onclick="handleClick()">刷新</button>
<canvas></canvas>
</body>
<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    const devicePixelRatio = window.devicePixelRatio || 1;
    canvas.width = window.innerWidth * devicePixelRatio;
    canvas.height = window.innerHeight * devicePixelRatio;

    // 设置canvas的坐标系
    ctx.translate(canvas.width / 2, canvas.height)
    // 反转y坐标
    ctx.scale(1, -1)
    drawBranch([0, 0], 20, 200, 90)


    /**
     * 绘制树
     * @param v0 起始坐标
     * @param thick 粗细
     * @param length 长度
     * @param dir 角度
     */
    function drawBranch(v0, thick, length, dir) {
        if (thick < 5 && Math.random() < 0.8) {
            return
        }
        if (thick < 5) {
            drawHeart(v0[0], v0[1], 0.5)
            return
        }
        ctx.beginPath()
        ctx.moveTo(...v0)
        const v1 = [
            v0[0] + length * Math.cos((dir * Math.PI) / 180),
            v0[1] + length * Math.sin((dir * Math.PI) / 180)
        ]
        ctx.lineTo(...v1)
        ctx.strokeStyle = '#423535'
        ctx.lineCap = 'round'
        ctx.lineWidth = thick
        ctx.stroke()

        // // 递归 左分支 和右分支
        drawBranch(v1, thick * 0.8, length * 0.8, dir + Math.random() * 50)
        drawBranch(v1, thick * 0.8, length * 0.8, dir - Math.random() * 50)
    }

    function drawHeart(x, y) {
        // 计算缩放比例
        const scale = 40 / 120;
        // 创建线性渐变对象
        const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop(0, '#ff0000');
        gradient.addColorStop(1, '#ffcccc');

        // 设置画笔颜色和宽度
        ctx.fillStyle = gradient;
        ctx.lineWidth = 1;

        // 绘制爱心
        ctx.beginPath();
        x += 15
        y += 15
        ctx.moveTo(x + 70 * scale, y + 40 * scale * -1);
        ctx.bezierCurveTo(x + 75 * scale, y + 37 * scale * -1, x + 70 * scale, y + 25 * scale * -1, x + 50 * scale, y + 25 * scale * -1);
        ctx.bezierCurveTo(x + 20 * scale, y + 25 * scale * -1, x + 20 * scale, y + 62.5 * scale * -1, x + 20 * scale, y + 62.5 * scale * -1);
        ctx.bezierCurveTo(x + 20 * scale, y + 80 * scale * -1, x + 40 * scale, y + 102 * scale * -1, x + 75 * scale, y + 120 * scale * -1);
        ctx.bezierCurveTo(x + 110 * scale, y + 102 * scale * -1, x + 130 * scale, y + 80 * scale * -1, x + 130 * scale, y + 62.5 * scale * -1);
        ctx.bezierCurveTo(x + 130 * scale, y + 62.5 * scale * -1, x + 130 * scale, y + 25 * scale * -1, x + 100 * scale, y + 25 * scale * -1);
        ctx.bezierCurveTo(x + 85 * scale, y + 25 * scale * -1, x + 75 * scale, y + 37 * scale * -1, x + 75 * scale, y + 40 * scale * -1);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }
    function handleClick() {
        location.reload(); // 刷新当前页面
    }
</script>
</html>