养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

html5 canvas画布绘制文字 文字描边

时间:2024-11-14 23:31:13

HTML新增的画布功能不仅可以画图形,还可以绘制文亨蚂擤缚字以及文字描边等。今天小编我就来分享一下HTML5画布绘制文字,文字描边的经验给大家。

工具/原料

浏览器

hbuilderX

方法/步骤

1、首先设置画布,然后设置strokeStyle描边的颜色以及lineWidth描边大小。

html5 canvas画布绘制文字 文字描边

2、然后用strokeText开始对文字描边即可。第一个参数是文字,后面的两个是x,y坐标。

html5 canvas画布绘制文字 文字描边

3、然后就可以得到文字的描边了。

html5 canvas画布绘制文字 文字描边

4、而填充则使用fillStyle设置填充样式,以及用fillText填充文字即可。

html5 canvas画布绘制文字 文字描边

html5 canvas画布绘制文字 文字描边

5、当然描边和填充可以使用不同的坐标,这样即可有些重影叠加的效果了。

html5 canvas画布绘制文字 文字描边

html5 canvas画布绘制文字 文字描边

© 一点知识