首頁  >  文章  >  web前端  >  HTML5 canvas基本繪圖之繪製陰影效果

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

巴扎黑
巴扎黑原創
2017-05-21 14:42:492280瀏覽

是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;   

  17. #   context.shadowOffsetY = 30;   
  18. ##  ##context.shadowBl
  19.    context.fill();
  20. #

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn