是HTML5中新增的標籤,用於繪製圖形,這篇文章主要為大家詳細介紹了HTML5 canvas基本繪圖之繪製陰影方法,感興趣的小伙伴們可以參考一下
是HTML5中新增的標籤,用於繪製圖形,實際上,這個標籤和其他的標籤一樣,其特殊之處在於該標籤可以取得一個CanvasRenderingContext2D對象,我們可以透過JavaScript腳本來控制該物件進行繪圖。
只是一個繪製圖形的容器,除了id、class、style等屬性外,還有height和width屬性。在
1.取得
陰影繪製:
shadowColor 設定或傳回用於陰影的顏色。
shadowBlur 設定或傳回用於陰影的模糊等級(數值越大越模糊)。
shadowOffsetX 設定或傳回陰影與形狀的水平距離。
shadowOffsetY 設定或傳回陰影與形狀的垂直距離。
我們為先前繪製的五芒星加入陰影
JavaScript Code複製內容到剪貼簿
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
# context.beginPath( );
//設定是頂點的座標,依照頂點制定路徑
for (var i = 0; i < 5; i++) {
context *Math.PI)*200+200,
-Math. 地*
## -Math .sin((54+i*72)/180*Math.PI)*80+200);
}
context. closePath();
//設定邊框樣式以及填滿顏色
context.lineWidth=
# context.lineWidth=" 3";
卷##"#F5270B";
"#F7F2B4"##
text # .shadowOffsetX = 30;
以上是HTML5 canvas基本繪圖之繪製陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!