要開始使用HTML <canvas> 元素繪圖，首先需在HTML 文件中設(shè)置基本結(jié)構(gòu)。 1. 添加帶有id、寬度和高度的<canvas> 標(biāo)籤以定義畫布大小，並提供不支持canvas 的瀏覽器的回退信息。 2. 使用JavaScript 通過document.getElementById() 獲取canvas 元素，並調(diào)用getContext('2d') 獲取2D 渲染上下文以進(jìn)行繪製。 3. 使用fillStyle 和fillRect() 等方法繪製填充圖形，或使用strokeStyle 和strokeRect() 繪製邊框。 4. 開始時(shí)應(yīng)確保腳本在DOM 加載完成後執(zhí)行，並利用開發(fā)者工具調(diào)試及注意像素縮放問題。

To get started with drawing graphics using the HTML <canvas></canvas> element, you first need to set up a basic structure in your HTML file. Unlike other elements like <div> or <code><img alt="使用html` `用於繪製圖形（初始設(shè)置）。" > , the <canvas></canvas> itself doesn't display anything until you use JavaScript to draw on it. ` for drawing graphics (initial setup)." />

Setting Up the <canvas></canvas> Element

Start by adding the <canvas></canvas> tag to your HTML page. It's a good idea to give it an id so you can easily reference it in JavaScript.

 <canvas id="myCanvas" width="500"    style="max-width:90%"></canvas>

The width and height attributes define the size of your drawing area. If you don't specify them, the canvas will default to 300px wide and 150px tall — which might be too small for most purposes.

You should also consider adding a fallback message inside the <canvas> tags for browsers that don't support it:

 <canvas id="myCanvas" width="500"    style="max-width:90%">
  Your browser does not support the canvas element.
</canvas>

Accessing the Canvas with JavaScript

Once the canvas is in place, the next step is to access it from JavaScript. You'll typically do this using document.getElementById() (or another DOM selector), then get its rendering context.

Here's how:

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

The getContext('2d') call gives you a 2D drawing context, which includes all the methods and properties you need to draw shapes, text, images, and more.

A few things to keep in mind:

• Make sure the script runs after the canvas element is loaded. You can put your script at the bottom of the page or use window.onload .
• If you're using modules or bundlers, ensure the DOM is ready before trying to access elements.

Basic Drawing: A Simple Example

Now that you have access to the context, you can start drawing. Let's create a simple filled rectangle:

 ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

This draws a blue square starting at coordinates (50, 50) with a width and height of 100 pixels.

Here's what each part does:

• fillStyle sets the color, gradient, or pattern used to fill shapes.
• fillRect(x, y, width, height) draws a filled rectangle at the specified position and size.

You can also draw outlines:

 ctx.strokeStyle = 'red';
ctx.strokeRect(50, 50, 100, 100);

This adds a red border around the same area without filling it.

Tips for Getting Started

• Start small. Try drawing different shapes and experimenting with colors.
• Use browser developer tools to debug — especially if nothing shows up.
• Remember that canvas is pixel-based, so scaling can affect quality.
• Always clear the canvas ( ctx.clearRect() ) if you plan to redraw content dynamically.

基本上就這些。 Once you've got the initial setup down, you can move on to more advanced topics like animation, interactivity, and image manipulation.