如何將文本寫入HTML畫布

使用CSS或HTML width / height屬性將畫布大小設置為例如200 x 400:

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

並確保還設置JavaScript中canvas對象的width / height屬性,以避免文本呈現模糊,例如:

canvas.width = 1800
canvas.height = 1200

首先,獲取對畫布的引用

const canvas = document.querySelector('canvas')

並從中創建一個上下文對象:

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

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

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

確保起點的x和y坐標包含在畫布尺寸中。

您可以在調用之前傳遞其他屬性fillText()自定義外觀,例如:

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

免費下載我的JavaScript初學者手冊


更多js教程: