canvas实现的炫酷文字特效html页面源码

mazai5080

已于 2022-05-07 00:49:42 修改

阅读量777

点赞数

分类专栏：前端源码文章标签： javascript html css

于 2022-05-07 00:49:14 首次发布

本文链接：https://blog.csdn.net/mazai5080/article/details/124622232

版权

前端源码专栏收录该内容

100 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，canvas实现的炫酷文字特效html页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

动画预览如下（图2）

图2

代码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10155，需要的朋友，关注文末公众号后，搜索10155，即可获取。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
body{
  background: #000;overflow: hidden
}</style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>
var txt = "92ui.net";
var txtH = 100;
var font = "sans-serif";
var bg = "#000";
var rayColor1 = "#e0f7fa";
var rayColor2 = "#18ffff";
var fade = 1000;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth;
var ch = canvas.height = window.innerHeight;

var w2 = cw/2;
var h2 = ch/2;
var pi = Math.PI;
var pi2 = pi*.5;