How to draw smooth curve through N points using javascript HTML5 canvas?

When drawing smooth curves on an HTML5 canvas using a series of points, common methods include Bézier curves or quadratic splines. Here, I will demonstrate how to use JavaScript and the HTML5 Canvas API to draw smooth Bézier curves using a set of points.

Step 1: Set up the HTML5 Canvas

First, add a canvas element to your HTML file.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smooth Curve Drawing Example</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;">
Your browser does not support Canvas.
</canvas>
<script src="drawCurve.js"></script>
</body>
</html>

Step 2: Write the JavaScript Code

In the drawCurve.js file, we will write the JavaScript code for drawing the curve. We will use the quadraticCurveTo method, which draws quadratic Bézier curves and requires two control points.

javascript
window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        // Define points
        var points = [{x: 50, y: 200}, {x: 150, y: 100}, {x: 250, y: 200}, {x: 350, y: 100}, {x: 450, y: 200}];

        // Move to the first point
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);

        // Draw smooth curve through intermediate points
        for (var i = 1; i < points.length - 2; i++) {
            var cp = {x: (points[i].x + points[i + 1].x) / 2, y: (points[i].y + points[i + 1].y) / 2};
            ctx.quadraticCurveTo(points[i].x, points[i].y, cp.x, cp.y);
        }

        // Draw the last curve segment
        ctx.quadraticCurveTo(points[points.length - 2].x, points[points.length - 2].y, points[points.length - 1].x, points[points.length - 1].y);

        // Stroke the path
        ctx.stroke();
    }
};

Explanation

Initialize the canvas and context: Use getElementById to get the canvas element, then use getContext('2d') to obtain the 2D rendering context.
Define the points: Create an array of points that serve as key nodes for the curve.
Draw the curve: Use moveTo to move to the first point. Then, for each intermediate point pair, calculate the control point (midpoint) and use quadraticCurveTo to draw the quadratic Bézier curve segment. For the last pair of points, directly draw the curve from the second-to-last point to the last point.

Conclusion

By using the above method, we can draw a smooth curve on an HTML5 canvas using multiple points. This technique is very useful in graphical applications, especially when dynamically generating or modifying graphics.

2024年8月14日 23:29 回复

1个答案

Step 1: Set up the HTML5 Canvas

Step 2: Write the JavaScript Code

Explanation

Conclusion

你的答案