用canvas創建帶有陰影的圖形和文字,供大家參考,具體內容如下
ctx.shadowBlur=20;設置陰影模糊范圍。
ctx.shadowColor;設置陰影模糊顏色。
還可以利用
shadowOffsetX屬性設置陰影與圖形的水平距離。
shadowOffsetY屬性設置陰影與圖形的垂直距離。
代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html> < html > < head > < title >創建帶有陰影的圖形和文字</ title > </ head > < body > < h3 align = "center" >放射狀漸變色</ h3 > < hr > < canvas id = "myc1" width = "800" height = "600" ></ canvas > < script type = "text/javascript" > var myc = document.getElementById("myc1");//繪制一個新畫布 var ctx = myc.getContext("2d"); //設置繪圖環境為2d var myg = ctx.createRadialGradient(130,200,0,130,200,90); //addColorStop方法 第一個參數為圖像內的百分比 第二個參數為顏色 myg.addColorStop(0,"white"); myg.addColorStop(0.5,"pink"); myg.addColorStop(0.6,"green"); myg.addColorStop(0.4,"blue"); ctx.fillStyle=myg; ctx.shadowColor="black"; //陰影顏色 ctx.shadowBlur=20; //陰影模糊范圍 ctx.arc(130,200,100,0,Math.PI*2); //繪制一個新圓 ctx.fill(); ctx.beginPath(); var myg1 = ctx.createRadialGradient(550,250,50,550,250,200); myg1.addColorStop(0,"blue"); myg1.addColorStop(0.6,"green"); myg1.addColorStop(1,"red"); ctx.fillStyle=myg1; ctx.font="50px 黑體"; //設置字體大小和字體樣式 ctx.shadowBlur=50; //設置陰影模糊范圍 ctx.shadowColor="yellow";//陰影顏色; ctx.shadowOffsetX=30; //水平方向網上偏移; ctx.shadowOffsetY=-30;//垂直方向往下偏移; ctx.fillText("放射性漸變文字",350,200); </ script > </ body > </ html > |
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。
原文鏈接:https://blog.csdn.net/believehxl/article/details/114763698