資料結構
網路
關係資料庫管理系統(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>
輸出
指令碼執行後，將在網頁上生成一系列具有不同陰影模糊度的正方形。
示例
在下面的示例中，我們為canvas建立了一個陰影模糊。
<!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>
輸出
執行上述指令碼後，將生成一個在網頁上繪製的canvas，該canvas填充綠色，並帶有藍色陰影模糊。
示例
在下面的示例中，我們為文字建立了一個陰影。
<!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+ 次瀏覽
