How to draw an oval in html5 canvas?

Drawing an ellipse on HTML5 Canvas can be achieved using the ellipse method of the Canvas API. This method allows you to define the ellipse's center coordinates, radii, rotation angle, and start/end angles. Below is a specific code example with explanations of its key parts.

First, define a <canvas> element in your HTML file:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Ellipse Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

Then, in your JavaScript file (here script.js), write the following code to draw the ellipse:

javascript
// Get the canvas element
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Set the ellipse styles
ctx.fillStyle = 'blue';  // Fill color
ctx.strokeStyle = 'red'; // Stroke color
ctx.lineWidth = 2;       // Stroke width

// Draw the ellipse
// ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, [anticlockwise])
ctx.beginPath(); // Start a new path
ctx.ellipse(200, 200, 100, 50, 0, 0, 2 * Math.PI);
ctx.fill();      // Fill the ellipse
ctx.stroke();    // Draw the stroke

// Explanation:
// x, y - x and y coordinates of the ellipse's center
// radiusX, radiusY - horizontal and vertical radii of the ellipse
// rotation - rotation angle of the ellipse (set to 0 here for no rotation)
// startAngle, endAngle - start and end angles for drawing the ellipse (0 to 2π for a full ellipse)
// anticlockwise - optional, indicates direction (counterclockwise by default; false for clockwise)

In this example, we first obtain the canvas element and its 2D context. We then set the ellipse's fill color, stroke color, and stroke width. Finally, we use the ellipse method to define the ellipse's position, size, rotation, and angle range, followed by fill() and stroke() to render it.

This method enables precise control over the ellipse's shape and position, making it ideal for scenarios requiring accurate rendering. Here are the steps to use the ellipse() function:

Get the Canvas element and context: Define a <canvas> element in HTML, then retrieve it and its 2D rendering context in JavaScript.
Set ellipse parameters: Specify the ellipse's center coordinates (x, y), radii (radiusX, radiusY), rotation angle, and start/end angles.
Draw the ellipse: Start a new path with beginPath(), call ellipse() to define the shape, and then use stroke() or fill() to render the outline or fill.

Below is another specific code example:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Ellipse Example</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML canvas tag.
    </canvas>

    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // Start drawing path
        ctx.beginPath();

        // Draw ellipse: center at (100, 100), x-axis radius 50, y-axis radius 75
        // No rotation (0 degrees), from 0 to 360 degrees (full ellipse)
        ctx.ellipse(100, 100, 50, 75, 0, 0, 2 * Math.PI);

        // Set styles and draw ellipse outline
        ctx.strokeStyle = 'red';
        ctx.stroke();
    </script>
</body>
</html>

In this example, we draw an ellipse centered at (100, 100) on a 200x200 pixel canvas, with an x-axis radius of 50 pixels and a y-axis radius of 75 pixels, no rotation, and a full ellipse outline.

2024年6月29日 12:07 回复

1个答案

你的答案