html5笛卡尔心形曲线的实现

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 09:52:13

　　html5笛卡尔心形曲线的实现

HTML5 Canvas 绘制笛卡尔心形曲线

笛卡尔心形曲线简介

笛卡尔心形曲线是一种经典的数学曲线，因其浪漫的形状而广受欢迎。它的数学表达式为：

x = a(1 + cosθ)cosθ
y = a(1 + cosθ)sinθ

其中，a是控制心形大小的参数，θ是极角。

HTML5 Canvas 实现步骤

创建画布元素:

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

获取画布上下文:

JavaScript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

定义绘制函数:

JavaScript

function drawHeart(a, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    for (let theta = 0; theta < Math.PI * 2; theta += 0.01) {
        const x = a * (1 + Math.cos(theta)) * Math.cos(theta) + canvas.width / 2;
        const y = a * (1 + Math.cos(theta)) * Math.sin(theta) + canvas.height / 2;
        ctx.lineTo(x, y);
    }
    ctx.stroke();
}

调用绘制函数:
JavaScript
```
drawHeart(100, 'red');
```

完整代码

HTML

<!DOCTYPE html>
<html>
<head>
    <title>笛卡尔心形曲线</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d   1. shaynly.com 

shaynly.com');

        function drawHeart(a, color) {
            ctx.beginPath();
            ctx.strokeStyle = color;
            for (let theta = 0; theta < Math.PI * 2; theta += 0.01) {
                const x = a * (1 + Math.cos(theta)) * Math.cos(theta) + canvas.width / 2;
                const y = a * (1 + Math.cos(theta)) * Math.sin(theta) + canvas.height / 2;
                ctx.lineTo(x, y);
            }
            ctx.stroke();
        }

        drawHeart(100, 'red');
    </script>
</body>
</html>