如何使线条发光画布 - Javascript(1)

📌 相关文章

📜 如何使线条发光画布 - Javascript(1)

📅 最后修改于: 2023-12-03 15:38:08.852000 🧑 作者: Mango

如何使线条发光画布 - JavaScript

在本文中，将介绍如何使用 JavaScript 和 HTML5 Canvas 创造线条发光的效果。

准备工作

在开始之前，我们需要先准备一个 HTML 文件，并在其中引入 Canvas 元素和 JavaScript 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>线条发光画布</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
  </body>
</html>

绘制线条

我们使用 Canvas 的 lineTo() 方法来绘制线条。我们需要将 lineTo() 绘制的线条描边，并将描边的样式设置为发光效果。

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

// 设置 Canvas 大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 绘制线条
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.lineWidth = 5;
context.strokeStyle = '#fff';
context.stroke();

// 描边发光
context.shadowBlur = 20;
context.shadowColor = '#fff';
context.lineWidth = 10;
context.stroke();

在这段代码中，我们首先获取 Canvas 元素和它的上下文。然后，我们通过调用 lineTo() 方法绘制一条从点 (100, 100) 到点 (200, 200) 的线。

接下来，我们将 lineWidth 属性设置为 5，以增加线条的宽度。然后，我们将 strokeStyle 设置为白色，这会将线条的颜色设置为白色。

在最后，我们设置 shadowBlur 和 shadowColor 属性，以将线条描边的样式设置为发光效果。我们还将 lineWidth 属性设置为 10，以增加描边的宽度。

完整代码

这是使用 JavaScript 和 HTML5 Canvas 创造线条发光的完整代码：

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

// 设置 Canvas 大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 绘制线条
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.lineWidth = 5;
context.strokeStyle = '#fff';
context.stroke();

// 描边发光
context.shadowBlur = 20;
context.shadowColor = '#fff';
context.lineWidth = 10;
context.stroke();

结论

在本文中，我们介绍了如何使用 JavaScript 和 HTML5 Canvas 创建线条发光的效果。我们使用了 lineTo() 方法绘制线条，并使用了描边发光的样式来增强效果。这是一个简单的技巧，可以用来创建漂亮的视觉效果。