資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 繪製透過多個點的平滑曲線？
在本文中，我們將學習如何使用 JavaScript 繪製透過多個點的平滑曲線，藉助於 canvas 瀏覽器 API 和 HTML 元素。
在網頁上視覺化資料或建立互動式圖形時，繪製透過多個點的平滑曲線可以極大地增強資訊的審美和可讀性。讓我們透過一些示例來了解如何實現這一點。
示例 1
在本示例中，我們將利用貝塞爾曲線的概念，貝塞爾曲線由一組控制點定義，以繪製一條透過這些點的平滑曲線。我們將使用 canvas HTML 元素及其上下文 API 預定義我們將繪製平滑曲線的點。
檔名：index.html
<html lang="en">
<head>
<title>
How to Draw Smooth Curve Through Multiple Points using JavaScript?
</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
const points = [
{ x: 50, y: 100 },
{ x: 150, y: 200 },
{ x: 250, y: 50 },
{ x: 350, y: 150 },
{ x: 450, y: 100 },
];
function drawSmoothCurve(points) {
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length - 1; i++) {
const xc = (points[i].x + points[i + 1].x) / 2;
const yc = (points[i].y + points[i + 1].y) / 2;
context.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}
// Connect the last two points with a straight line
context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
context.stroke();
}
drawSmoothCurve(points);
</script>
</body>
</html>
示例 2
在本示例中，我們將遵循上述程式碼結構，並使用貝塞爾曲線和 Catmull-Rom 樣條曲線方法繪製透過多個點的平滑曲線。
檔名：index.html
<html lang="en">
<head>
<title>How to Draw Smooth Curve Through Multiple Points using JavaScript?</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
const points = [
{ x: 50, y: 100 },
{ x: 150, y: 200 },
{ x: 250, y: 50 },
{ x: 350, y: 150 },
{ x: 450, y: 100 },
];
function drawSmoothCurve(points) {
context.beginPath();
context.moveTo(points[0].x, points[0].y);
// Example 1: Bézier Curves
// context.quadraticCurveTo(cp1x, cp1y, x, y);
// context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
for (let i = 1; i < points.length - 1; i++) {
const xc = (points[i].x + points[i + 1].x) / 2;
const yc = (points[i].y + points[i + 1].y) / 2;
context.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}
// Connect the last two points with a straight line
context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
context.stroke();
}
drawSmoothCurve(points);
// Example 2: Catmull-Rom Splines
function catmullRomSpline(points, context) {
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length - 2; i++) {
const p0 = points[i - 1];
const p1 = points[i];
const p2 = points[i + 1];
const p3 = points[i + 2];
const t = 0.5;
const x1 = (-t * p0.x + (2 - t) * p1.x + (t - 2) * p2.x + t * p3.x) / 2;
const y1 = (-t * p0.y + (2 - t) * p1.y + (t - 2) * p2.y + t * p3.y) / 2;
const x2 = ((2 * t - 3) * p0.x + (3 - 4 * t) * p1.x + (1 + 2 * t) * p2.x + (-t) * p3.x) / 2;
const y2 = ((2 * t - 3) * p0.y + (3 - 4 * t) * p1.y + (1 + 2 * t) * p2.y + (-t) * p3.y) / 2;
const x3 = (t * p1.x + (2 - t) * p2.x) / 2;
const y3 = (t * p1.y + (2 - t) * p2.y) / 2;
context.bezierCurveTo(x1, y1, x2, y2, x3, y3);
}
context.lineTo(points[points.length - 2].x, points[points.length - 2].y);
context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
context.stroke();
}
catmullRomSpline(points, context);
</script>
</body>
</html>
結論
總之，使用 JavaScript 繪製透過多個點的平滑曲線可以極大地增強基於 Web 的圖形和資料視覺化的視覺美觀性和可讀性。透過利用貝塞爾曲線和 Catmull-Rom 樣條曲線的功能，我們學習瞭如何藉助 canvas HTML 元素及其上下文 API 使用 javascript 繪製透過多個點的平滑曲線。
更新於： 2023年8月3日
664 次瀏覽
廣告