如何用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
- 閱讀 ( 816 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章