1. 犀牛前端部落首页
  2. Html5百科

html canvas绘制文字案例教程

html canvas绘制文字案例教程

文本俺将带大家从零开始用canvas绘制文字,不会使用canvas的同学要加油了~

使用CSS或者html width height属性来设置画布大小,例如下面代码设置画布大小为200*400

<!--犀牛前端部落-->
<canvas width="200" height="400"></canvas>

同时需要确保你也在JavaScript中也设置了画布对象的宽度/高度属性,以避免文本渲染模糊,例如:

/**犀牛前端部落*/
canvas.width = 1800
canvas.height = 1200

第一步

获取到canvas对象

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)

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3150.html

发表评论

登录后才能评论