如何將文本寫入 HTML canvas

使用 CSS 或 HTML 的 width / height 屬性設定 canvas 的大小，例如 200 x 400：

1	<canvas width="200" height="400"></canvas>

並且確保也在 JavaScript 中設定 canvas 物件的寬度 / 高度屬性，以避免文本模糊呈現，例如：

1 2	canvas.width = 1800 canvas.height = 1200

首先，獲取對 canvas 的引用：

1	const canvas = document.querySelector('canvas')

然後從它創建一個上下文對象：

1	const context = canvas.getContext('2d')

現在，我們可以調用上下文對象的 fillText() 方法：

1	context.fillText('hi!', 100, 100)

確保起點的 x 和 y 坐標包含在 canvas 的大小內。

你可以在調用 fillText() 之前傳遞額外的屬性來自定義外觀，例如：

1
2
3

context.font = 'bold 70pt Menlo'
context.fillStyle = '#ccc'
context.fillText('hi!', 100, 100)

tags: [“HTML5”, “canvas”, “JavaScript”]