Canvas如何绘制一个带有阴影效果的文字？

图形开发canvashtml5

在Canvas中绘制带有阴影效果的文字，你可以使用CanvasRenderingContext2D对象的shadowOffsetX、shadowOffsetY、shadowBlur和shadowColor属性来设置阴影的偏移量、模糊程度和颜色。一旦设置了这些属性，之后绘制的所有内容（包括文字）都会带有这个阴影效果，直到你更改它们或清除它们。

以下是一个绘制带有阴影效果的文字的示例：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制带有阴影效果的文字</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置阴影颜色、偏移量和模糊级别
        ctx.shadowColor = 'black';
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        ctx.shadowBlur = 5;

        // 绘制文字
        ctx.font = '30px Arial';
        ctx.fillStyle = 'white';
        ctx.fillText('Hello, Canvas!', 50, 100);
    </script>
</body>
</html>

尝试一下 »

解释：

在上面的代码中，我们使用了Canvas的shadowColor、shadowOffsetX、shadowOffsetY和shadowBlur属性来设置文字的阴影效果。

  • shadowColor属性设置了阴影的颜色，这里我们选择了黑色。
  • shadowOffsetX和shadowOffsetY属性分别设置了阴影在水平和垂直方向上的偏移量，这里我们设置了3个像素的偏移。
  • shadowBlur属性设置了阴影的模糊级别，这里我们选择了5个像素的模糊。

在设置了阴影效果之后，我们使用fillText方法来绘制文字。文字的颜色、字体和位置可以通过fillStyle、font和fillText的参数来设置。

用户可以通过点击“尝试一下”按钮来运行这段代码，并在浏览器中看到带有阴影效果的文字效果。

上一篇：Canvas如何绘制旋转的图形？

下一篇：Canvas如何绘制一个带有渐变色的矩形？