如何用HTML5制作阴影文字?
HTML5除了兼容以往HTML版本的标签以外,还给我们提供了许多功能,比如绘画和文字处理。以往在PS中处理的图片和文字效果,用h5也能实现,下面就让我们一起来学习如何在h5中制作阴影文字,并在网页中输出。
操作方法
- 01
首先,先在<body>标签里面定义一张画布,并为画布设置高度、宽度和背景颜色如图1
- 02
把画布通过JS内部样式加载到网页中,代码如图2
- 03
运行程序,结果如图3
- 04
添加一个画笔(getContext),设置字体的大小和样式,并在坐标为X轴:250、Y轴:250,最大值为800的地方输出文字,代码如图4
- 05
运行程序,结果如图5
- 06
在X轴(shadowOffsetX)和Y轴(shadowOffsetX)上添加文字阴影部份,并为阴影文字设置背景颜色代码如图6
- 07
运行程序,结果如图7
- 08
为文字内容添加字体样式( fillstyle)边框(storestyle)颜色等,代码如图8
- 09
运行程序,结果如图9
赞 (0)