canvas shadowBlur 屬性
此屬性設定或返回陰影的模糊級數,預設值為0。
語法結構:
[JavaScript] 純文字檢視 複製程式碼context.shadowBlur=number;
引數解析:
(1).number:數字,設定陰影的模糊級數。
瀏覽器相容:
(1).IE9+瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).火狐瀏覽器支援此屬性。
(5).Opera瀏覽器支援此屬性。
(6).Safari瀏覽器支援此屬性。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas{ border:1px solid #d3d3d3; width:300px; height:150px; } </style> <script> window.onload=function(){ let canvas=document.getElementById("ant"); let ctx=canvas.getContext("2d"); ctx.shadowBlur=20; ctx.fillStyle="red"; ctx.shadowColor="black"; ctx.fillRect(20,20,100,80); ctx.shadowColor="blue"; ctx.fillRect(140,20,100,80); } </script> </head> <body> <canvas id="ant"></canvas> </body> </html>
程式碼執行效果截圖如下:
數字越大,模糊效果越明顯,大家可以自行測試。
相關文章
- canvas globalAlpha 屬性Canvas
- canvas miterLimit 屬性CanvasMIT
- canvas font 屬性Canvas
- canvas ImageData data 屬性Canvas
- canvas globalCompositeOperation 屬性Canvas
- canvas shadowOffsetY 屬性Canvas
- canvas shadowOffsetX 屬性Canvas
- canvas ImageData height 屬性Canvas
- canvas ImageData width 屬性Canvas
- canvas textBaseline 屬性Canvas
- canvas ImageData.data 屬性Canvas
- canvas lineJoin 屬性Canvas
- canvas shadowColor 屬性Canvas
- canvas lineCap 屬性Canvas
- canvas lineWidth 屬性Canvas
- canvas ImageData.height 屬性Canvas
- canvas ImageData.width 屬性Canvas
- CSS與canvas屬性設定畫布尺寸CSSCanvas
- CSS 與 canvas 屬性設定畫布尺寸CSSCanvas
- HTML5 Canvas 資料持久化儲存之屬性列表HTMLCanvas持久化
- iOS動畫 屬性屬性解析iOS動畫
- CSS 屬性篇(七):Display屬性CSS
- JavaScript私有屬性和靜態屬性JavaScript
- CSS字型屬性和文字屬性詳解CSS
- 私有屬性
- allowfullscreen 屬性
- background 屬性
- cssText 屬性CSS
- translucent屬性
- parentStyleSheet屬性
- cssRules 屬性CSS
- background屬性
- jQuery 屬性jQuery
- 屬性動畫動畫
- jQuery屬性jQuery
- TextView屬性TextView
- XML屬性XML
- Property屬性