当前位置：首页 > news >正文

【第2章绘制】2.6 阴影

news 2025/5/31 17:13:10

文章目录

前言
示例效果
示例代码

前言

在 canvas 之中进行绘制时，不管要画的是图形、文本，还是图像，都可以通过修改绘图环境中的如下4个属性值来指定阴影效果：

shadowColor：CSS3 格式的颜色。
shadowOffsetX：从图形或文本到阴影的水平像素偏移。
shadowOffsetY：从图形或文本到阴影的垂直像素偏移。
shadowBlur：一个与像素无关的值。该值被用于高斯模糊方程之中，以便对阴影进行模糊化处理。

如果满足以下条件，那么使用 Canvas 的绘图环境对象就可以绘制出阴影效果了：

指定的 shadowColor 值不是全透明的。
在其余的阴影属性之中，存在一个非0的值。

如果想要禁用阴影效果，进行如下设置：

context.shadowColor = undefind
context.shadowOffsetX = 0
context.shadowOffsetY = 0
context.shadowBlur = 0

示例效果

应用程序中前2个矩形阴影都是正偏移，第3个矩形阴影是负偏移。
在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>2-7-使用阴影效果来制作具有深度感的按钮</title></head><body><canvas id="canvas" width="600" height="300"> canvas not supported </canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d')const SHADOW_COLOR = 'rgba(0, 0, 0, 0.7)'const setIconShadow = () => {context.shadowColor = SHADOW_COLORcontext.shadowOffsetX = 2context.shadowOffsetY = 2context.shadowBlur = 5}const setSelectedIconShadow = () => {context.shadowColor = SHADOW_COLORcontext.shadowOffsetX = 4context.shadowOffsetY = 4context.shadowBlur = 5}const setInnerIconShadow = () => {context.shadowColor = SHADOW_COLORcontext.shadowOffsetX = -4context.shadowOffsetY = -4context.shadowBlur = 5}setIconShadow()context.strokeStyle = 'black'context.strokeRect(20, 20, 100, 100)setSelectedIconShadow()context.strokeRect(140, 20, 100, 100)setInnerIconShadow()context.strokeRect(260, 20, 100, 100)</script></body>
</html>