阴影效果
canvas 中绘制阴影主要靠四个控制,它们分别是:shadowOffsetX
,shadowOffsetY
,shadowBlur
,shadowColor
,本小节主要学习这四个。
对 css 有了解的同学都知道,通过 @R_976_2@-shadow
可以设置的阴影。
我们看阴影的图:
上面中,左侧没有阴影,右侧有阴影。
阴影就相当于我们的影子,阴影的形状、大小都是由主体图形决定的。如果主体是矩形,那它的阴影就是等大的矩形,主体如果是圆形,那它的阴影就是同样的圆形。
在 canvas 中,其实所有的图形认都是有阴影的,只是认的阴影被主体完全遮挡,并且认的阴影颜色为透明。
先看案例:
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=
canvas.height=
const ctx = canvas.getContext('2d');
ctx.rect(,,,)
ctx.fillStyle = "#456795"
// 设置阴影
ctx.shadowOffsetX = ;
ctx.shadowOffsetY = ;
ctx.shadowColor = "#ccc";
ctx.shadowBlur = ;
ctx.fill();
</script>
<body>
</html>
本案例中,我们绘制了 100 * 100 的矩形,并且给画布的四个阴影分别重新赋值。
我们将上面例子中设置阴影拆分讲解:
设置水平偏移量,我们设置阴影向水平正方向偏移10像素,也就是向右偏移10像素,如果想要向左偏移,则设定为 -10 即可,认偏移值为 0。
ctx.shadowOffsetX = 10;
设置垂直偏移量,我们设置阴影向垂直正方向偏移10像素,也就是向下偏移10像素,如果想要向上偏移,则设定值为 -10 即可,认偏移值为 0。
ctx.shadowOffsetY = 10;
设置阴影的颜色,这里我们设置阴影的颜色为灰色。
ctx.shadowColor = "#ccc";
设置阴影的模糊程度,这里我们设置了4个像素的模糊程度。
ctx.shadowBlur = 4;
这里的模糊值会扩大原本阴影的大小。举例说明:当我们没有设置模糊程度时,阴影是 100 * 100 的灰色矩形,当我们设置模糊程度为 4 时,当前阴影就变成了 108 * 108 的灰色矩形。阴影的上、下、左、右都会向外扩充4个像素,这4个像素会以设定的阴影颜色从内向外渐变为透明。
运行结果:
阴影的设置属于全局,会影响到后面绘制的所有图形,如果只是想要某个图形有阴影,则设置完阴影后,需要再将这些设置为认值。
看案例:
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=
canvas.height=
const ctx = canvas.getContext('2d');
ctx.rect(,,,)
ctx.fillStyle = "#456795"
// 设置阴影
ctx.shadowOffsetX = ;
ctx.shadowOffsetY = ;
ctx.shadowColor = "#ccc";
ctx.shadowBlur = ;
ctx.fill();
// 恢复认阴影
ctx.shadowOffsetX = ;
ctx.shadowOffsetY = ;
ctx.shadowBlur = ;
ctx.fillStyle="yellow"
ctx.fillRect(,, , )
</script>
运行结果:
我们可以看到,黄色的正方形就没有了阴影。同学们可以把恢复认值注释掉后,再看。
本小节中我们使用到4个新的,它们分别是 shadowOffsetX
,shadowOffsetY
, shadowBlur
和 shadowColor
。
shadowOffsetX
作用是设置水平偏移量,可以为负数,负数值向左偏移。
变量说明:
shadowOffsetY
作用是设置垂直偏移量,可以为负数,负数值向上偏移。
变量说明:
shadowBlur
作用是设置阴影的模糊程度。
变量说明:
shadowColor
作用是设置阴影颜色。
变量说明:
本小节我们主要学习了利用4个阴影给图形设置阴影,需要注意的是设置的阴影属于全局作用,会影响到后面绘制的图形。