要開始使用HTML canvas繪製20個(gè)圖形，首先需創(chuàng)建canvas元素並獲取2D上下文；1. 在HTML中添加帶id、寬度和高度的標(biāo)籤；2. 用JavaScript通過getElementById獲取canvas並調(diào)用getContext('2d')獲得繪圖上下文；3. 使用fillRect、strokeRect繪製矩形；4. 用beginPath、moveTo、lineTo和closePath創(chuàng)建路徑繪製三角形等自定義形狀；5. 利用arc方法繪製圓形或弧形；6. 設(shè)置fillStyle、strokeStyle、lineWidth等屬性進(jìn)行樣式設(shè)計(jì)；7. 創(chuàng)建線性或徑向漸變並應(yīng)用於填充；8. 使用font、fillText和strokeText繪製實(shí)心或描邊文本；9. 通過textAlign和textBaseline控製文本對(duì)齊；10. 加載Image對(duì)象並用drawImage將圖片繪製到畫布；11. 實(shí)現(xiàn)動(dòng)畫需清空畫布、更新位置、重繪圖形；12. 使用requestAnimationFrame創(chuàng)建流暢動(dòng)畫循環(huán)；13. 避免用CSS設(shè)置canvas尺寸以防模糊；14. 盡量減少重繪區(qū)域以提升性能；15. 可緩存複雜圖形至離屏canvas復(fù)用；16. 慎用getImageData和putImageData因性能開銷大；17. 優(yōu)先使用requestAnimationFrame而非setInterval；18. 可分層使用多個(gè)canvas優(yōu)化渲染；19. 掌握基本繪圖API後逐步組合複雜視覺效果；20. 從簡單形狀入手，逐步添加顏色、動(dòng)畫和交互完成豐富圖形應(yīng)用。

The HTML <canvas></canvas> element is a powerful tool for rendering dynamic 2D graphics directly in the browser using JavaScript. Unlike SVG or CSS-based graphics, canvas operates as a bitmap—once something is drawn, it's just pixels. This makes it ideal for games, data visualizations, animations, and real-time rendering.

Here's a practical guide to getting started with the canvas element for 20 graphics.

Setting Up the Canvas Element

To begin, you need to add a <canvas></canvas> tag to your HTML. It acts as a container for graphics, but by itself, it does nothing.

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

You should always set width and height attributes directly on the canvas (not via CSS) to avoid scaling issues. CSS can stretch the canvas, leading to blurry graphics.

After placing the canvas, access it in JavaScript and get the 2D drawing context:

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

The ctx object is your main tool for drawing shapes, text, images, and more.

Drawing Basic Shapes

With the 2D context, you can draw rectangles, paths, circles, and lines.

Rectangles

Canvas has built-in methods for rectangles:

• fillRect(x, y, width, height) – draws a filled rectangle
• strokeRect(x, y, width, height) – draws an outlined rectangle
• clearRect(x, y, width, height) – clears a rectangular area

Example:

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

ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.strokeRect(120, 10, 100, 50);

Paths and Lines

For custom shapes, use paths:

 ctx.beginPath();
ctx.moveTo(200, 20); // Start point
ctx.lineTo(250, 80); // Draw line to
ctx.lineTo(150, 80);
ctx.closePath(); // Connect back to start
ctx.fillStyle = 'green';
ctx.fill();

This draws a filled triangle.

Circles and Arcs

Use arc() to draw circles or parts of circles:

 ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'purple';
ctx.fill();

You can create pie charts, clocks, or custom curves by adjusting the angles.

Styling and Colors

Canvas lets you control how shapes look:

• fillStyle – sets color, gradient, or pattern for fills
• strokeStyle – same, but for outlines
• lineWidth , lineCap , lineJoin – control line appearance

Examples:

 ctx.fillStyle = '#FF5733';
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
ctx.lineWidth = 4;
ctx.lineCap = 'round'; // 'butt', 'round', or 'square'

You can also use gradients:

 const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(10, 130, 200, 60);

Drawing Text and Images

Text

Canvas supports text rendering with control over font, alignment, and style:

 ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 170);
ctx.strokeText('Outline Text', 10, 200);

Use textAlign ( start , end , center , left , right ) and textBaseline ( top , middle , bottom ) for precise placement.

Images

You can draw images from <img alt="2D圖形的HTML帆布元素指南" > elements or other sources:

 const img = new Image();
img.src = 'picture.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 150, 100); // image, x, y, width, height
};

drawImage() is versatile—it can also slice and scale parts of images.

Animation Basics

Canvas shines with animation. To animate, you typically:

1. Clear the canvas
2. Update object positions
3. Redraw everything
4. Repeat using requestAnimationFrame

Example: Moving circle

 let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear
  ctx.beginPath();
  ctx.arc(x, 150, 20, 0, Math.PI * 2);
  ctx.fillStyle = 'orange';
  ctx.fill();

  x = 2;
  if (x > canvas.width) x = 0;

  requestAnimationFrame(animate);
}

animate();

This loop creates smooth motion by syncing with the browser's refresh rate.

Performance Tips and Best Practices

• Avoid unnecessary redraws : Only redraw what changed, or use multiple canvases (eg, one for background, one for moving objects).
• Cache complex drawings : If a shape doesn't change, draw it once offscreen and reuse with drawImage() .
• Limit getImageData / putImageData : These are slow; use sparingly for pixel manipulation.
• Use requestAnimationFrame instead of setInterval for smoother, efficient animation.

Canvas gives you full control over 2D rendering. While it lacks built-in object management (you're drawing pixels, not DOM elements), that same low-level access enables high-performance visuals. With practice, you can build anything from charts to games.

Basically, start small—draw a shape, add color, animate it—and build up from there.

以上是2D圖形的HTML帆布元素指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！