【canvas实现文字发光效果】

最新推荐文章于 2024-06-12 10:25:35 发布

usp1994

最新推荐文章于 2024-06-12 10:25:35 发布

阅读量612

点赞数

文章标签： canva可画 javascript

本文链接：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/131761668

版权

以下是使用Canvas实现文字发光效果的文章大纲：

简介

在这里插入图片描述

在本篇文章中，我们将介绍如何使用Canvas来实现文字发光效果。通过设置阴影和颜色，我们可以创建出发光的文字效果。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas多重阴影发光效果</title>
</head>
<body>
<canvas id="glowingTextCanvas"></canvas>
<script>
  const canvas = document.getElementById('glowingTextCanvas');
  const ctx = canvas.getContext('2d');

  // 设置Canvas尺寸
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 创建文本
  const text = 'Glowing Text';
  const fontSize = 80;
  const fontFamily = 'Arial';
  const x = canvas.width / 2;
  const y = canvas.height / 2;

  // 设置文本样式
  ctx.font = `${fontSize}px ${fontFamily}`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 创建发光效果
  const glowColor1 = 'rgba(188,19,254,0.8)'; // 发光颜色1
  const glowColor2 = 'rgba(188,19,254,0.8)'; // 发光颜色2
  const shadowBlur1 = 50; // 阴影模糊程度1
  const shadowBlur2 = 50; // 阴影模糊程度2

  // 绘制函数
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 设置背景颜色
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制发光文本
    ctx.shadowColor = glowColor1;
    ctx.shadowBlur = shadowBlur1;
    ctx.fillStyle = 'white';
    ctx.fillText(text, x, y);

    // 添加第二个阴影
    ctx.shadowColor = glowColor2;
    ctx.shadowBlur = shadowBlur2;
    ctx.fillText(text, x, y);

    // 清除阴影设置
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
  }

  // 初始绘制
  draw();

</script>
</body>
</html>

使用方法

将上述代码保存为一个HTML文件，例如canvas-glowing-text.html。
打开浏览器，运行HTML文件。
页面将显示出带有发光效果的文字。

总结

通过使用Canvas的阴影和颜色设置，我们可以轻松地实现文字发光效果。这种效果可以用于各种设计和视觉效果中，为文字增添动态和吸引力。

请注意，以上代码仅为示例，你可以根据自己的需求进行修改和扩展。

usp1994

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【canvas实现文字发光效果】

在本篇文章中，我们将介绍如何使用Canvas来实现文字发光效果。通过设置阴影和颜色，我们可以创建出发光的文字效果。通过使用Canvas的阴影和颜色设置，我们可以轻松地实现文字发光效果。这种效果可以用于各种设计和视觉效果中，为文字增添动态和吸引力。请注意，以上代码仅为示例，你可以根据自己的需求进行修改和扩展。
复制链接

扫一扫