使用Canvas实现粒子连线效果

最新推荐文章于 2024-01-12 13:42:08 发布

ヽ(￣▽￣)ﾉ

最新推荐文章于 2024-01-12 13:42:08 发布

阅读量1k

点赞数 6

分类专栏： Canvas 文章标签： html5

本文链接：https://blog.csdn.net/qq_38563342/article/details/103758170

版权

看到别人网站上的画布特效，觉得特别炫酷，然后自己就在网上学习了一些Canvas的基础知识，附上链接：Canvas基础
然后就借鉴下大神的代码自己做了一个粒子线条特效，效果如下

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
      }

      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <b