HTML 玫瑰曲线 (Rose Curve) 演示

以下是一个简洁、极简风格的 HTML 玫瑰曲线演示代码：

 

   

   

   

   

        body {

            font-family: \'Arial\', sans-serif;

            margin: 0;

            padding: 20px;

            display: flex;

            flex-direction: column;

            align-items: center;

            background-color: #f8f8f8;

            color: #333;

        }

        

        h1 {

            font-weight: 300;

            margin-bottom: 5px;

        }

        

        .controls {

            margin: 20px 0;

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            gap: 15px;

        }

        

        .control-group {

            display: flex;

            flex-direction: column;

        }

        

        label {

            font-size: 14px;

            margin-bottom: 5px;

            color: #666;

        }

        

        input {

            width: 150px;

        }

        

        canvas {

            background-color: white;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

            border-radius: 4px;

        }

        

        .info {

            font-size: 12px;

            color: #999;

            margin-top: 20px;

            text-align: center;

            max-width: 500px;

        }

   

   

玫瑰曲线演示

   

   

   

        玫瑰曲线是极坐标下的数学曲线，方程为 r = a × cos(kθ) 或 r = a × sin(kθ)。

        当k为有理数时，曲线形成花瓣形状，花瓣数量取决于k的分子分母。

   

 

   

        const canvas = document.getElementById(\'roseCanvas\');

        const ctx = canvas.getContext(\'2d\');

        const kInput = document.getElementById(\'k\');

        const kValue = document.getElementById(\'k-value\');

        const petalsInput = document.getElementById(\'petals\');

        const petalsValue = document.getElementById(\'petals-value\');

        const sizeInput = document.getElementById(\'size\');

        const sizeValue = document.getElementById(\'size-value\');

        

        let k = parseFloat(kInput.value);

        let petals = parseInt(petalsInput.value);

        let size = parseInt(sizeInput.value);

        

        function updateValues() {

            k = parseFloat(kInput.value);

            petals = parseInt(petalsInput.value);

            size = parseInt(sizeInput.value);

            

            kValue.textContent = k;

            petalsValue.textContent = petals;

            sizeValue.textContent = size;

            

            drawRoseCurve();

        }

        

        function drawRoseCurve() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            

            const centerX = canvas.width / 2;

            const centerY = canvas.height / 2;

            

            // 绘制坐标轴

            ctx.strokeStyle = \'#ddd\';

            ctx.lineWidth = 1;

            ctx.beginPath();

            ctx.moveTo(0, centerY);

            ctx.lineTo(canvas.width, centerY);

            ctx.moveTo(centerX, 0);

            ctx.lineTo(centerX, canvas.height);

            ctx.stroke();

            

            // 绘制玫瑰曲线

            ctx.strokeStyle = \'#e91e63\';

            ctx.lineWidth = 2;

            ctx.beginPath();

            

            const points = 1000;

            for (let i = 0; i <= points; i++) {

                const theta = (i / points) * 2 * Math.PI * petals;

                const r = size * Math.cos(k * theta);

                

                const x = centerX + r * Math.cos(theta);

                const y = centerY + r * Math.sin(theta);

                

                if (i === 0) {

                    ctx.moveTo(x, y);

                } else {

                    ctx.lineTo(x, y);

                }

            }

            

            ctx.stroke();

        }

        

        kInput.addEventListener(\'input\', updateValues);

        petalsInput.addEventListener(\'input\', updateValues);

        sizeInput.addEventListener(\'input\', updateValues);

        

        // 初始绘制

        updateValues();

   

 

功能说明

1 

简洁UI设计：

纯色背景和简单的排版

无装饰性元素，专注于曲线展示

响应式布局适应不同屏幕

2

交互控制：

k值：控制曲线的形状和花瓣数量

花瓣数量：控制曲线循环次数

大小：控制曲线整体尺寸

3 

玫瑰曲线绘制：

使用Canvas绘制

基于极坐标方程 r = a × cos(kθ)

包含坐标轴参考线

4 

极简风格：

有限的配色方案（粉色曲线、灰色参考线）

简洁的滑块控制

最小化的文字说明

 

您可以将此代码保存为HTML文件并在浏览器中打开，或者根据需要调整参数和样式。

 

告诉我你的需求，我可以为你定制一个更符合你需要的版本！✨