心形公式实现

点击查看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>李峋的爱心代码 - JS版</title>
    <style>
        /* 还原剧中暗黑背景，让爱心更突出 */
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        /* 爱心下方的文字样式 */
        .text {
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            margin-top: 30px;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body>
    <canvas id="heartCanvas"></canvas>
    <div class="text">Lᵒᵛᵉ ᵧₒᵤ ❤️</div>

    <script>
        // 获取Canvas元素和绘图上下文
        const canvas = document.getElementById('heartCanvas');
        const ctx = canvas.getContext('2d');

        // 设置Canvas尺寸（适配屏幕，居中显示）
        const canvasSize = 600;
        canvas.width = canvasSize;
        canvas.height = canvasSize;

        // 坐标系偏移：将原点移到Canvas中心，方便绘制对称爱心
        ctx.translate(canvasSize / 2, canvasSize / 2);
        // 缩放系数，适配Canvas尺寸
        const scale = 80;

        // 定义笛卡尔心形公式：x² + (y - √|x|)² = 1
        // 计算给定x对应的y值
        function getHeartY(x) {
            return Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.abs(x), 1/3);
        }

        // 动态绘制的进度（0~1）
        let progress = 0;
        // 绘制的步长（越小越平滑）
        const step = 0.01;

        // 核心绘制函数
        function drawHeart() {
            // 清空画布（保留背景）
            ctx.clearRect(-canvasSize/2, -canvasSize/2, canvasSize, canvasSize);
            
            // 遍历x轴，范围-1到1（心形公式的有效范围）
            for (let x = -1; x <= 1 && x <= progress; x += step) {
                // 计算上下两部分的y值（对称爱心）
                const y1 = getHeartY(x);
                const y2 = -getHeartY(x);

                // 计算渐变颜色：从浅粉(#ff99cc)到深红(#ff0033)
                // 根据x的位置（-1~1）映射颜色值
                const colorRatio = (x + 1) / 2; // 0~1的比例
                const r = 255;
                const g = Math.floor(153 - colorRatio * 153); // 153→0
                const b = Math.floor(204 - colorRatio * 171); // 204→33
                const color = `rgb(${r}, ${g}, ${b})`;

                // 绘制上半部分点
                drawPoint(x * scale, -y1 * scale, color); // 负号调整y轴方向（Canvas y轴向下）
                // 绘制下半部分点
                drawPoint(x * scale, -y2 * scale, color);
            }

            // 增加进度，实现动态绘制效果
            if (progress < 1) {
                progress += 0.005;
                requestAnimationFrame(drawHeart); // 循环绘制，形成动画
            }
        }

        // 绘制单个点（用小矩形模拟，更清晰）
        function drawPoint(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, 2, 2); // 点的大小：2x2像素
        }

        // 启动绘制
        drawHeart();

    </script>
</body>
</html>

代码关键部分解释

Canvas基础配置：
- 将Canvas原点移到中心（ctx.translate），解决Canvas默认原点在左上角的问题，方便绘制对称爱心；
- 设置黑色背景，还原剧中的暗黑氛围感，让彩色爱心更突出。
心形公式实现：
- 核心是笛卡尔心形公式 $x^2 + (y - \sqrt{|x|})^2 = 1$，通过getHeartY(x)函数计算对应y值；
- 计算上下两部分y值（y1和y2），实现爱心的对称结构。
动态绘制与渐变：
- 用progress变量控制绘制进度，通过requestAnimationFrame实现逐帧动画，模拟剧中“逐步生成爱心”的效果；
- 颜色渐变：根据x轴位置计算RGB值，从浅粉色（#ff99cc）平滑过渡到深红色（#ff0033）。
坐标系适配：
- Canvas默认y轴向下，因此在绘制时给y值加负号（-y1 * scale），让爱心正立显示；
- 通过scale缩放系数，将公式的(-1,1)范围映射到Canvas的可视区域。

运行说明

将代码复制到文本编辑器（如记事本、VS Code）；
保存为heart.html（注意文件后缀是.html）；
双击该文件，用任意浏览器（Chrome、Edge、Firefox等）打开，即可看到爱心动态绘制的效果。

总结

核心依赖HTML5 Canvas实现图形绘制，无需额外库，浏览器原生支持；
基于笛卡尔心形数学公式计算坐标，保证爱心形状的经典还原；
通过requestAnimationFrame实现动态绘制动画，搭配RGB颜色渐变，还原剧中的视觉氛围感。
4.https://gitee.com/gawainehzh/oa-front-end-module

posted @ 2025-12-25 16:07 Gawaine 阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

Gawaine

心形公式实现

代码关键部分解释

运行说明

总结

公告