如何将文本写入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教程: