HTML5 canvas基本繪圖之繪製陰影效果

是HTML5中新增的標籤，用於繪製圖形，這篇文章主要為大家詳細介紹了HTML5 canvas基本繪圖之繪製陰影方法，感興趣的小伙伴們可以參考一下

是HTML5中新增的標籤，用於繪製圖形，實際上，這個標籤和其他的標籤一樣，其特殊之處在於該標籤可以取得一個CanvasRenderingContext2D對象，我們可以透過JavaScript腳本來控制該物件進行繪圖。

只是一個繪製圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在>元素上繪圖主要有三步：

1.取得元素對應的DOM對象，這是一個Canvas物件；
2.呼叫Canvas物件的getContext( )方法，得到一個CanvasRenderingContext2D物件；
3.呼叫CanvasRenderingContext2D物件進行繪圖。

陰影繪製：

• shadowColor 設定或傳回用於陰影的顏色。

• shadowBlur 設定或傳回用於陰影的模糊等級（數值越大越模糊）。

• shadowOffsetX 設定或傳回陰影與形狀的水平距離。

• shadowOffsetY 設定或傳回陰影與形狀的垂直距離。

我們為先前繪製的五芒星加入陰影

JavaScript Code複製內容到剪貼簿

1. var canvas = document.getElementById("canvas");   

2.    var context = canvas.getContext("2d");   

3. #   context.beginPath( );   

4.    //設定是頂點的座標，依照頂點制定路徑

5.    for (var i = 0; i < 5; i++) {   

6.        context *Math.PI)*200+200,   

7.                        -Math.      地*

8.        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   

   ##  -Math .sin((54+i*72)/180*Math.PI)*80+200);   

9.    }   

10.    context. closePath();   

11.    

    //設定邊框樣式以及填滿顏色

12.    context.lineWidth=

13. #   context.lineWidth=" 3";   

14. 卷##"#F5270B";   

15. #   context.shadowColor = 

    "#F7F2B4"##  

16. text 

    text # .shadowOffsetX = 30;   

#   context.shadowOffsetY = 30;   

17. ##  ##context.shadowBl
   context.fill()；
18. #

以上是HTML5 canvas基本繪圖之繪製陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！