首页canvas 绘制山峰

canvas 绘制山峰

时间: 2024-09-05 14:00:39 浏览: 44

Canvas是HTML5中用于绘制图形的API，它提供了一种动态创建矢量图的方式。如果你想在canvas上绘制一座山峰，你可以通过JavaScript操作`arc()`、`moveTo()`、`lineTo()`等方法来模拟山峰的形状。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 山峰</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="mountainCanvas" width="600" height="400"></canvas> <script> const canvas = document.getElementById('mountainCanvas'); const ctx = canvas.getContext('2d'); // 定义山顶坐标 const mountainTopX = canvas.width / 2; const mountainTopY = canvas.height - 100; // 绘制山峰主体 ctx.beginPath(); ctx.moveTo(0, mountainTopY); // 左侧山脚 ctx.lineTo(mountainTopX, mountainTopY); // 山顶 ctx.lineTo(canvas.width, mountainTopY); // 右侧山脚 // 添加曲线以模拟山脊 ctx.bezierCurveTo( mountainTopX, mountainTopY - 50, mountainTopX + 200, mountainTopY - 150, mountainTopX + 200, mountainTopY - 200 ); ctx.bezierCurveTo( mountainTopX + 200, mountainTopY - 250, mountainTopX, mountainTopY - 300, 0, mountainTopY - 300 ); // 完成路径并填充颜色 ctx.closePath(); ctx.fillStyle = '#7CB342'; // 绿色 ctx.fill(); // 绘制山脚下阴影 ctx.beginPath(); ctx.rect(0, mountainTopY - 350, canvas.width, 50); ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 阴影部分半透明黑色 ctx.fill(); </script> </body> </html> ``` 在这个例子中，我们首先创建了一个canvas画布，然后设置了两个贝塞尔曲线来形成山峰的主要轮廓，并添加了阴影效果。注意，实际的山峰细节可以根据需求进行调整。

阅读全文