HTML5 Canvas 中的顏色、樣式和陰影的屬性和方法

顏色、樣式和陰影的屬性與方法
fillStyle                設置或返回用於填充繪畫的顏色、漸變或模式
strokeStyle         設置或返回用於筆觸的顏色、漸變或模式
shadowColor        設置或返回用於陰影的顏色
shadowBlur        設置或返回用於陰影的模糊級別
shadowOffsetX        設置或返回陰影距形狀的水平距離
shadowOffsetY        設置或返回陰影距形狀的垂直距離

createLinearGradient(x0,y0,x1,y1)         創建線性漸變（用在畫布內容上）
x0         漸變開始點的 x 坐標
y0         漸變開始點的 y 坐標
x1         漸變結束點的 x 坐標
y1         漸變結束點的 y 坐標

createPattern(img,"repeat|repeat-x|repeat-y|no-repeat")                        在指定的方向上重復指定的元素
image         規定要使用的圖片、畫布或視頻元素。
repeat         默認。該模式在水平和垂直方向重復。
repeat-x         該模式只在水平方向重復。
repeat-y         該模式只在垂直方向重復。
no-repeat         該模式只顯示一次（不重復）。

createRadialGradient(x0,y0,r0,x1,y1,r1)                創建放射狀/環形的漸變（用在畫布內容上）
x0         漸變的開始圓的 x 坐標
y0         漸變的開始圓的 y 坐標
r0         開始圓的半徑
x1         漸變的結束圓的 x 坐標
y1         漸變的結束圓的 y 坐標
r1         結束圓的半徑

addColorStop(stop,color)                        規定漸變對象中的顏色和停止位置
stop         介於 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。
color         在結束位置顯示的 CSS 顏色值

<canvas id="b" width="500" height="450" style="border:1px solid #000"></canvas>
<img src="images/deng.png" id="lamp"/>
<script type="text/javascript">
var a=document.getElementById("b");
var ctx=a.getContext("2d");
ctx.fillStyle="green";                //設置或返回用於填充繪畫的顏色、漸變或模式
ctx.shadowColor="#000";                //設置或返回用於陰影的顏色
ctx.shadowBlur=25;                        //設置或返回用於陰影的模糊級別
ctx.shadowOffsetX=10;                //設置或返回陰影距形狀的水平距離
ctx.shadowOffsetY=10;                //設置或返回陰影距形狀的垂直距離
ctx.fillRect(20,20,150,100);


var grd=ctx.createLinearGradient(200,20,320,20);        //創建線性漸變（用在畫布內容上）
grd.addColorStop(0,"green");                                                //規定漸變對象中的顏色和停止位置
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"white");
ctx.strokeStyle=grd;
ctx.lineWidth=5;
ctx.strokeRect(200,20,150,100);

var grd=ctx.createRadialGradient(85,190,5,110,200,80);        //創建放射狀/環形的漸變（用在畫布內容上）
grd.addColorStop(0,"green");                                                        //規定漸變對象中的顏色和停止位置
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,150,150,100); 

var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,"repeat");        //在指定的方向上重復指定的元素
ctx.rect(200,150,150,100);
ctx.fillStyle=pat;
ctx.fill();
</script>