Wr 博客 Wr 博客
  • 首页
  • 软件
    • 系统
      • macOS
      • Windows 10
      • Chrome OS
    • 软件
      • Mac
      • Windows
      • Linux
      • iOS
      • Android
  • 编程
    • Python
    • HTML
  • 工具
    • Hosts
  • 建站
  • 闲言碎语
  • 优惠推荐
  • 关于
    • 友情链接
  • 首页
  • 软件
    • 系统
      • macOS
      • Windows 10
      • Chrome OS
    • 软件
      • Mac
      • Windows
      • Linux
      • iOS
      • Android
  • 编程
    • Python
    • HTML
  • 工具
    • Hosts
  • 建站
  • 闲言碎语
  • 优惠推荐
  • 关于
    • 友情链接

Canvas-Nest.js: 一个基于 HTML 5 Canvas 绘制的网页背景效果。

_Wr_1年前

官方 GitHub 仓库: 传送门

目录

  • 特性
  • 使用
  • 配置
  • 相关项目
Canvas-Nest.js: 一个基于 HTML 5 Canvas 绘制的网页背景效果。-Wr 博客

特性

  • 不依赖 jQuery,使用原生的 javascript。
  • 非常小,只有 2 Kb。
  • 非常容易实现,配置简单,即使你不是 web 开发者,也能简单搞定。
  • 模块化 & 区域渲染。

使用

  • 快捷使用

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

<script type="text/javascript" src="dist/canvas-nest.js"></script>

强烈建议在 </body>标签上方. 例如下面的代码结构:

<html>
<head>
	...
</head>
<body>
	...
	...
	<script type="text/javascript" src="dist/canvas-nest.js"></script>
</body>
</html>

然后就完成了,打开网页即可看到效果!请注意不要将代码置于 <head> </head>里面.

  • 模块化区域绘制(定制开发)

完成安装好,可以使用模块化方式 import。

并且只有一个 API,使用如下:

import CanvasNest from 'canvas-nest.js';

const config = {
  color: '255,0,0',
  count: 88,
};

// 在 element 地方使用 config 渲染效果
const cn = new CanvasNest(element, config);

// destroy
cn.destroy();

配置

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

Example:

  • 快捷使用
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
  • 模块化区域绘制(定制开发)
{
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};

注意: 所有的配置项都有默认值,如果你不知道怎么设置,可以先不设置这些配置项,就使用默认值看看效果也可以的。

相关项目

  • canvas-nest-for-wp: WP 插件,在插件市场搜索 canvas-nest 即可安装。
  • vue-canvas-nest: VUE 组件包装。
  • react-canvas-nest: React 组件包装。
  • canvas-nest-for-vscode: vscode 扩展, 在vscode扩展市场中搜索nest 即可安装。

#html5#javascript#建站#网页
0
分享
_Wr_ 站长
文章 100评论 59
赞赏
_Wr_
相关文章
  • 极具性价比的星轮香港BGP①型 VPS 测评
  • Xiuno 付费插件购买分享
  • WordPress教程:查看当天用户注册数量以及用户注册时间排序
  • 去除 WordPress 管理菜单栏 WordPress logo
  • WordPress 开启面包屑导航
评论 (0)
再想想
    沙发抢一发
_Wr_
站长
一个热爱科技的普通人。
100文章
59评论
33获赞
热门文章
TOP1
2020 年最新 Google Hosts
1年前
TOP2
Adobe CC 2020 全家桶 破解版(Windows 和 Mac)
1年前
TOP3
如何在普通电脑上安装 Chrome OS(不是 Chromium OS)
1年前
TOP4
常用 User Agent (UA)
1年前
TOP5
如何解决 WordPress 官网 429 Too Many Requests 错误
1年前
最新文章
【限时优惠】正版 IDM 一年仅需 ¥35!
2月前
宝塔 Linux 面板 7.4.2 及 Windows 面板 6.8 phpMyAdmin 高危漏洞
8月前
极具性价比的星轮香港BGP①型 VPS 测评
8月前
Xiuno 付费插件购买分享
9月前
BAT 脚本仿蓝屏
10月前
24 2月, 2020
5 个推荐的 WordPress 插件
  • 首页
  • 友情链接
  • 关于
Copyright © 2020-2021 Wr 博客.