【分享】网页背景效果插件 Canvas-Nest.js

云游君

发布于 2021-05-21 10:22:29

4.5K0

发布于 2021-05-21 10:22:29

文章被收录于专栏：云游的小教程

一个基于 HTML5 Canvas 绘制的网页背景效果。

Github

canvas-nest.js

配置方法

使用 jsDelivr 提供的免费 CDN 服务。

将下面的代码插入到 <body> 和 </body> 标签之间

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/canvas-nest.js/dist/canvas-nest.js"
></script>

自定义样式

color : 线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)，注意用 , 分割
pointColor: 点颜色, 默认：'0,0,0'; RGB 格式.（注意：使用 , 分割）
opacity : 线条透明度（0~1）, 默认: 0.5
count : 线条的总数量, 默认: 99
zIndex : 背景的 z-index 属性，css 属性用于控制所在层的位置, 默认: -1

Example

<script
  type="text/javascript"
  color="0,0,255"
  pointColor="0,0,255"
  opacity="0.7"
  zIndex="2"
  count="66"
  src="https://cdn.jsdelivr.net/npm/canvas-nest.js/dist/canvas-nest.js"
></script>

效果就如本页面所示！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除

canvas

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

canvas

登录后参与评论

0 条评论

热度

【分享】网页背景效果插件 Canvas-Nest.js

【分享】网页背景效果插件 Canvas-Nest.js

Github

配置方法

自定义样式

Example

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐