这是一个帆布派对！
#javascript #npm #webgl #htmlcanvas

介绍了帆布派对，这是我前一段时间制作的NPM软件包。

表中的内容

  1. Overview
  2. Basic Usage
  3. Frameworks integration
  4. Basic Usage
  5. Why i made it?
  6. Summary

概述

帆布派对是HTML帆布动画库。它是为了轻松添加高度交互式背景而创建的。它对VUE和REACT都有全面的支持，以及带有示例的文档指南。
在此处查看Canvas Party website。

安装

安装只需在项目的根目录上运行此命令。

使用NPM： 

$ npm install canvas-party

带纱 

$ yarn add canvas-party

如果您使用的是JavaScript框架，请参见Frameworks integration。

基本用法

要在您的应用中添加帆布派对，首先从canvas-party导入useCanvasParty函数，此功能
将收到两个论点：

  1. 画布将附加到的包装元素。
  2. 选项对象，将指定type和 可选自定义。

这将返回具有自定义画布元素和与之相关的一些方法的对象。

import { useCanvasParty } from 'canvas-party'

const wrapper = document.createElement('div')

const canvasParty = useCanvasParty(wrapper, {
  type: 'confetti',
  options: {
    colors: ['#A3F7B5', '#EB5160', '#B0F2B4'],
    count: 450,
  },
})

wrapper.appendChild(canvasParty.canvas)

框架集成

帆布派对对VUE和REACT都有全面的支持。

与反应

安装 

$ npm install @cavnas-party/react

然后导入canvasparty组件并给予所需的模板类型。

import { useState } from 'react'
import CanvasParty from '@canvas-party/react'

function reactApp() {
const [canvasType, setCanvasType] = useState('confetti')

  return (
    <>
      <button onClick={() => setCanvasType('trippy')}></button>
      <CanvasParty type={canvasType} />
    </>
  )
}

export default reactApp

与Vue

安装 

$ npm install @cavnas-party/vue

然后导入canvasparty组件并给予所需的模板类型。

<script setup>
import { ref, reactive } from 'vue'
import CanvasParty from '@canvas-party/vue'

const canvasType = ref('confetti')
const canvasOptions = reactive({
  colors: ['#399E5A', '#5ABCB9', '#63E2C6'],
  count: 350,
})
</script>

<template>
  <div>
    <CanvasParty :type="canvasType" :options="options" />
  </div>
</template>

为什么我做到了？

在我构建网站的短时间内，我偶然发现了许多带有漂亮设计的酷炫网站。这些网站经常没有某种“哇”效果，无论是一种很酷的滚动行为，复杂的版式动画还是活泼的背景。

这些背景特别捕捉了我的眼睛，因此我开始挖掘他们的代码。我问自己：“我该如何制作这种背景？”我立即知道我正在看一个画布 - 右手有无限潜力的工具。

我希望它像在React中添加图表组件一样容易，而不是被所有逻辑所困扰，只是以最少的精力获得背景。

概括

帆布派对是为下一个项目添加“香料”的惊人工具，使用各种模板和自定义您可以在几秒钟内升级您的应用程序。
但是，这仍然是一个相对论的新项目，预计将来会发生变化。

谢谢！