数据结构
网络
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+ 次查看
