html 画布绘图文本案例研究

文字我将带你用canvas从头开始绘制文字。不会使用画布的同学加油~

使用 CSS 或 html width-height 属性设置画布大小。例如以下代码将画布大小设置为200*400

<!--前端教程网-->
<canvas width="200" height="400"></canvas>

另外，请确保在 JavaScript 中设置画布对象的宽度/高度属性，以避免文本显示模糊，例如：

/**前端教程网*/
canvas.width = 1800
canvas.height = 1200

第一步

获取画布项目

const canvas = document.querySelector('canvas')

步骤 2

创建上下文对象

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

步骤 3

调用上下文对象的 fillText() 方法

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

步骤 4

注意：起点的x和y坐标不能超过画布的大小。

在调用fillText()之前可以传递额外的属性来设置显示效果，例如：

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