使用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)