使用canvas制作几座相连的山峰

要使用HTML5的<canvas>元素来制作几座相连的山峰，你可以按照以下步骤进行：

设置HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Mountains</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="mountainCanvas" width="800" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

编写JavaScript代码 (script.js 文件)：

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

const mountainHeight = 200;
const mountainWidth = 400;
const numMountains = 3;
const spacing = 100;

function drawMountain(x, height, width) {
    ctx.beginPath();
    ctx.moveTo(x, canvas.height);
    
    // 使用二次贝塞尔曲线绘制山峰
    const peakX = x + width / 2;
    const peakY = canvas.height - height;
    ctx.quadraticCurveTo(peakX, peakY, x + width, canvas.height);
    
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.stroke();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < numMountains; i++) {
        const x = i * (mountainWidth + spacing);
        drawMountain(x, mountainHeight, mountainWidth);
    }
}

draw();