word-raindrop

基于Canvas实现黑客帝国文字雨特效

安装使用

通过NPM安装,import导入

npm install --save word-raindrop
import WordRaindrop from 'word-raindrop';

通过Script标签引入

<script src="https://unpkg.com/word-raindrop/dist/index.min.js"></script>

示例

点击DEMO查看

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>基于Canvas实现黑客帝国文字雨特效</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/word-raindrop/dist/index.min.js"></script>
    <script>
      new WordRaindrop('app');
    </script>
  </body>
</html>

API说明

  • WordRaindrop(target, options)
    • 说明:初始化实例,创建对象
    • 参数:
      • target(必填)
        • 类型:String || Element
        • 说明:挂载canvas的dom节点id或对象
      • options
        • 类型:Object || undefined
        • 说明:渲染参数
        • 示例:
          const options = {
          text: '01', // 流动的字符
          fontSize: 18, // 字体大小,单位像素
          fontFamily: 'arial', // 字体
          textColor: 'rgba(255, 255, 255, 1)', // 字体颜色
          backgroundColor: 'rgba(0, 0, 0, 0.1)', // 背景颜色,必须设置透明度
          speed: 8 // 流动速度,值为1速度最快
          };
    • 示例:
      new WordRaindrop('app', options);

版本更新说明

  • 1.0.0
    • 根据画布大小绘制初始字符
    • 添加动画,循环绘制字符

      安装使用

通过NPM安装,import导入

npm install word-raindrop
import WordRaindrop from 'word-raindrop';

通过Script标签引入

<script src="https://unpkg.com/word-raindrop/dist/index.min.js"></script>

示例

点击DEMO查看

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>基于Canvas实现黑客帝国文字雨特效</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/word-raindrop/dist/index.min.js"></script>
    <script>
      new WordRaindrop('app');
    </script>
  </body>
</html>

API说明

  • WordRaindrop(target, options)
    • 说明:初始化实例,创建对象
    • 参数:
      • target(必填)
        • 类型:String || Element
        • 说明:挂载canvas的dom节点id或对象
      • options
        • 类型:Object || undefined
        • 说明:渲染参数
        • 示例:
          const options = {
          text: '01', // 流动的字符
          fontSize: 18, // 字体大小,单位像素
          fontFamily: 'arial', // 字体
          textColor: 'rgba(255, 255, 255, 1)', // 字体颜色
          backgroundColor: 'rgba(0, 0, 0, 0.1)', // 背景颜色,必须设置透明度
          speed: 8 // 流动速度,值为1速度最快
          };
    • 示例:
      new WordRaindrop('app', options);

版本更新说明

  • 1.0.0
    • 根据画布大小绘制初始字符
    • 添加动画,循环绘制字符

坤尘记

I AM KUNCHEN!思绪如风,总会在某处停留;用轻灵的文字书写关于技术生活的奇思妙想。

浙ICP备2020045526号