Canvas陰影繪製

陰影的繪製主要依賴以下四個屬性：

const canvas = document.

getelementbyid
("canvas");
const ctx = canvas.
getcontext
("2d");
// 陰影的x偏移
ctx.shadowoffsetx =10;
// 陰影的y偏移
ctx.shadowoffsety =10;
// 陰影顏色
ctx.shadowcolor =
'rgba(0,0,0,0.5)'
;// 陰影的模糊半徑
需要注意的是，陰影的偏移是以繪製圖形的左上角為座標原點來計算的。
而且，設定的陰影相關屬性會對後面繪製的圖形產生影響。
const canvas = document.

getelementbyid
("canvas");
const ctx = canvas.
getcontext
("2d");
// 陰影的x偏移
ctx.shadowoffsetx =10;
// 陰影的y偏移
ctx.shadowoffsety =10;
// 陰影顏色
ctx.shadowcolor =
'rgba(0,0,0,0.5)'
;// 陰影的模糊半徑
				
Canvas繪製基礎
繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...
				
Canvas 繪製文字
filltext text，x,y maxwidth 填充文字 stroketext text，x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設，文字對齊界線開始的地方 左對齊指本地從左向右，右對齊指本地從右向左 ...
				
Canvas 繪製直線
1.canvas繪圖是一種基於狀態的繪圖，繪圖的過程應該是先設定繪圖的狀態，再呼叫具體的函式進行繪製。例如繪製一條 100,100 到 700,700 的直線 context.moveto 100,100 設定起點狀態 context.lineto 700,700 設定末端狀態 context.li...