Canvas绘图技术咨询：请求提供绘图示例代码（含画线实现）

开发者阿泽

2026-5-12

Hey there! Absolutely, let's walk through how to draw lines on HTML Canvas with clear, practical examples. I'll break it down step by step so you can follow along easily.

Basic Canvas Line Drawing Example

First, here's a complete, minimal example that draws a simple line on a Canvas element:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Basic Line</title>
</head>
<body>
    <!-- Add a Canvas element with a border for visibility -->
    <canvas id="myCanvas" width="400" height="200" style="border: 1px solid #ddd;"></canvas>

    <script>
        // Get the Canvas element and its 2D drawing context
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Start drawing a line
        ctx.beginPath(); // Initialize a new drawing path
        ctx.moveTo(50, 50); // Move the "pen" to the starting coordinates (x, y)
        ctx.lineTo(350, 150); // Define a line segment to the end coordinates
        ctx.stroke(); // Render the line with default styles (black, 1px width)
    </script>
</body>
</html>

Let's break down the key parts:

getContext('2d'): This gives us access to the 2D drawing API, which is the core tool for all Canvas drawing operations.
beginPath(): Starts a new drawing path—critical to avoid mixing this line with any future/previous drawing actions.
moveTo(x, y): Positions the drawing cursor at your desired starting point.
lineTo(x, y): Creates an invisible line segment from the current cursor position to the specified coordinates.
stroke(): Renders the defined line segment using the current style settings.

Customized Line Styles Example

Want to make your lines stand out? Here's how to adjust color, thickness, and endpoint styles:

// Get context (same as before)
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a styled line
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(350, 100);
ctx.strokeStyle = '#2ecc71'; // Set line color (hex, RGB, or RGBA)
ctx.lineWidth = 5; // Set line thickness in pixels
ctx.lineCap = 'round'; // Round the line endpoints (options: round/butt/square)
ctx.stroke();

Drawing Multiple Connected Lines (e.g., a Shape)

You can chain lineTo() calls to draw connected segments, like a triangle:

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

// Draw a triangle
ctx.beginPath();
ctx.moveTo(200, 50); // Top vertex
ctx.lineTo(100, 150); // Bottom-left vertex
ctx.lineTo(300, 150); // Bottom-right vertex
ctx.closePath(); // Automatically connect back to the starting point
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 3;
ctx.stroke();

// Optional: Fill the shape with a semi-transparent color
// ctx.fillStyle = 'rgba(231, 76, 60, 0.3)';
// ctx.fill();

That should cover the fundamentals of drawing lines on Canvas. Feel free to tweak coordinates, styles, and path logic to match your specific project needs!

内容的提问来源于stack exchange，提问作者Francesco Comuzzi

Canvas绘图技术咨询：请求提供绘图示例代码（含画线实现）

Let's break down the key parts: #

Let's break down the key parts: