数据结构
网络
关系数据库管理系统(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+ 次浏览
