資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 HTML5 Canvas 繪製陰影
在 HTML5 canvas 中，您可以為形狀、線條、文字和影像新增陰影，使其具有深度感。使用 HTML5 canvas 時，您可以使用以下 canvas 上下文屬性來新增陰影。
shadowOffsetX()
shadowOffsetY()
shadowColor()
shadowBlur()
shadowOffsetX()
此屬性用於獲取或設定陰影相對於頁面水平方向的距離。要更改陰影的位置，可以使用正數或負數。預設值為零。
語法
以下是 shadowOffsetX() 的語法：
ctx.shadowOffsetX = h_distance;
其中 h_distance 表示陰影相對於頁面的水平距離。
shadowOffsetY()
此屬性用於獲取或設定陰影相對於頁面垂直方向的距離。要更改陰影的位置，可以使用正數或負數。預設值為零。
語法
以下是 shadowOffsetY() 的語法：
ctx.shadowOffsetX = v_distance;
其中 v_distance 表示陰影相對於頁面的垂直距離。
shadowColor()
shadowColor() 屬性用於獲取或設定陰影的顏色。
語法
以下是 shadowColor() 的語法：
ctx.shadowColor
其中 shadowColor 是 CSS 顏色。
shadowBlur()
shadowBlur() 屬性用於獲取或設定應用於陰影的當前模糊值。
語法
以下是 shadowBlur() 的語法：
ctx.shadowBlur = blur_value
其中 blur_value 是應用於陰影的模糊量。
讓我們透過以下示例來了解如何使用 HTML5 canvas 繪製陰影。
示例
在以下示例中，我們建立了一系列具有不同模糊度的正方形。
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("mytutorial");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.shadowColor = "black";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowColor = "green";
ctx.strokeRect(60, 60, 210, 210);
ctx.shadowColor = "blue";
ctx.strokeRect(85, 85, 210, 210);
}
</script>
</body>
</html>
輸出
當指令碼執行時，它將在網頁上生成一個輸出，顯示一系列具有不同陰影模糊度的正方形。
示例
在以下示例中，我們為畫布建立了一個陰影模糊。
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="300" height="150"></canvas>
<script>
var c = document.getElementById("mytutorial");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "blue";
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 100, 80);
</script>
</body>
</html>
輸出
執行上述指令碼後，它將在網頁上生成一個輸出，其中包含一個用綠色填充的畫布，並帶有藍色陰影模糊。
示例
在以下示例中，我們為文字建立了一個陰影。
<!DOCTYPE html>
<html>
<body>
<canvas id="mytutorial" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById("mytutorial");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.shadowColor = 'grey';
ctx.shadowBlur = 2;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 9;
ctx.font = 'italic 32px sans-serif ';
ctx.fillText('TUTORIALSPOINT', 10, 150);
}
</script>
</body>
</html>
輸出
當用戶嘗試執行指令碼時，輸出視窗彈出，顯示指令碼中使用的文字以及新增到網頁上文字的陰影。
示例
讓我們看看以下示例，我們為文字建立了一個模糊。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("This is shadow test", 5, 30);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>
輸出
當指令碼執行時，它將在網頁上生成一個輸出，其中包含添加了陰影模糊的文字。
1K+ 次檢視
