如何将文本写入HTML画布中

70 阅读1分钟

使用CSS或HTML的宽度/高度属性来设置画布的大小,例如200 x 400。

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

并确保在JavaScript中也设置画布对象的宽度/高度属性,以避免文字呈现模糊,例如。

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)