如何用HTML5制作阴影文字？
HTML5除了兼容以往HTML版本的标签以外，还给我们提供了许多功能，比如绘画和文字处理。以往在PS中处理的图片和文字效果，用h5也能实现，下面就让我们一起来学习如何在h5中制作阴影文字，并在网页中输出。
工具/材料
dw等代码编辑工具
操作方法
-
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
- End
- 发表于 2017-10-31 00:00
- 阅读 ( 812 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章