添加文本到HTML5畫(huà)布需通過(guò)JavaScript的Canvas 2D上下文實(shí)現(xiàn)，1. 首先獲取canvas元素及其2D渲染上下文；2. 使用fillText()方法在指定坐標(biāo)繪製填充文本；3. 通過(guò)font屬性設(shè)置字體樣式；4. 使用strokeText()繪製描邊文本，可結(jié)合fillText()實(shí)現(xiàn)填充加描邊效果；5. 利用textAlign和textBaseline調(diào)整文本對(duì)齊方式和基線(xiàn)位置，最終通過(guò)設(shè)置樣式並選擇合適方法即可完成文本繪製，該過(guò)程依賴(lài)瀏覽器可用字體，需手動(dòng)處理?yè)Q行與文本測(cè)量，完整操作以句子結(jié)束。

Adding text to an HTML5 canvas is done using JavaScript's Canvas 2D drawing context. Since the canvas element itself is just a container for graphics, you need to use scripting to draw text onto it.

Here's how to do it step by step:

1. Get the Canvas Context

First, you need to get a reference to the canvas element and its 2D rendering context.

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

<script>
  const canvas = document.getElementById(&#39;myCanvas&#39;);
  const ctx = canvas.getContext(&#39;2d&#39;);
</script>

2. Use fillText() to Add Text

The main method for adding visible text is fillText() . It draws filled text at a specified position.

 ctx.fillText("Hello, Canvas!", 50, 100);

• The first argument is the text string.
• The second and third arguments are the x and y coordinates (the baseline of the text is at this y position).

3. Customize Font and Style

You can change the font, size, and style using the font property.

 ctx.font = "30px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Styled Text", 50, 150);

Common font settings:

• "bold 20px sans-serif"
• "italic 24px Georgia"
• "16px monospace"

4. Stroke (Outline) Text Instead of Filling

If you want outlined text without fill, use strokeText() .

 ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.strokeText("Outlined Text", 50, 200);

You can even combine both fillText() and strokeText() for filled text with an outline.

5. Text Alignment and Baseline

Adjust how text is positioned using textAlign and textBaseline .

 ctx.textAlign = "center"; // "start", "end", "left", "right", "center"
ctx.textBaseline = "middle"; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"

ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

Full Example

 <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>

<script>
  const canvas = document.getElementById(&#39;myCanvas&#39;);
  const ctx = canvas.getContext(&#39;2d&#39;);

  // Draw filled text
  ctx.font = "30px Georgia";
  ctx.fillStyle = "green";
  ctx.fillText("Hello World", 50, 100);

  // Draw stroked text
  ctx.font = "24px Arial";
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.strokeText("Outline Text", 50, 150);

  // Centered text
  ctx.textAlign = "center";
  ctx.fillStyle = "purple";
  ctx.fillText("Centered", canvas.width / 2, 200);
</script>

Notes:

• Canvas text doesn't wrap automatically. For multiline text, call fillText() multiple times with adjusted y positions.
• You can measure text width using ctx.measureText("your text").width for layout calculations.
• Text rendering depends on fonts available to the browser. Use web-safe fonts or @font-face for custom fonts.

Basically, just set the style, pick a position, and use fillText() or strokeText() . That's all it takes.

以上是如何將文本添加到HTML5畫(huà)布中？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！