HTML Canvas 清除阴影

在HTML Canvas上绘制对象时，它们可能会有阴影效果。有时我们需要在后续的绘制中清除这些阴影效果。本文将介绍如何清除阴影。

使用 clearRect() 方法

HTML Canvas提供了 clearRect() 方法来清除一个矩形区域内的内容。我们可以使用该方法清除绘制对象的阴影。

以下是一个示例：

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

// 绘制一个带阴影的矩形
ctx.shadowBlur = 10;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

// 清除阴影
ctx.clearRect(50, 50, 100, 100);

首先，我们先绘制了一个带阴影的矩形。然后，使用 clearRect() 方法清除了该矩形区域的内容，包括阴影效果。

使用 save() 和 restore() 方法

另一种清除阴影的方法是使用 save() 和 restore() 方法。这两个方法可以保存和恢复绘图环境的状态。

以下是一个示例：

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

// 绘制一个带阴影的矩形
ctx.shadowBlur = 10;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

// 保存绘图环境的状态
ctx.save();

// 清除阴影
ctx.shadowBlur = 0;

// 绘制一个矩形
ctx.fillStyle = "blue";
ctx.fillRect(200, 50, 100, 100);

// 恢复绘图环境的状态
ctx.restore();

首先，我们绘制了一个带阴影的矩形，然后使用 save() 方法保存了绘图环境的状态。接着，我们清除了阴影效果，并绘制了另一个矩形。最后，使用 restore() 方法恢复了绘图环境的状态，这样我们就可以继续在原始状态下进行绘制。

以上是清除阴影的两种方法。通过它们，你可以清除阴影，从而继续在同一Canvas上进行绘制。

参考文献：

• HTML5 Canvas - 清除画布内容
• HTML5 Canvas - 保存与恢复