首页 > 其他分享 >canvas实现睡眠波2.0,框架兼容,支持大部分PC端

canvas实现睡眠波2.0,框架兼容,支持大部分PC端

时间:2024-08-23 16:49:46浏览次数:12  
标签:canvas JayVone app value label PC sleepWindow 2.0

npm引入方式

npm i @JayVone/sleepWave

// 使用方式1
import { sleepWindow } from '@JayVone/sleepWave'

// 获取dom然后绑定
const app = document.getElementById('app');
sleepWindow.init(app);

// 在需要绘制的时候setOptions
sleepWindow.setOption({
  types: ['1', '2', '3', '4', 'xixixixixixixixixixi', 'test'],
  data: [
    { label: 'test', value: 22 },
    { label: '1', value: 12},
    { label: '2', value: 1 },
    { label: '3', value: 2},
    { label: 'xixixixixixixixixixi', value: 5 },
    { label: 'shs', value: 3 },
    { label: '2', value: 12},
    { label: '2', value: 22},
    { label: 'shasds', value: 3 },
  ],
  borderRadius: 16,
  blockHeight: 2,
})

基本效果

标签:canvas,JayVone,app,value,label,PC,sleepWindow,2.0
From: https://www.cnblogs.com/mizuki-vone/p/18376398

相关文章

  • P9640 [SNCPC2019] Digit Mode
    思路:定义\(F(l,r)\)表示若已经确定了\([1,l-1]\)的数,且\([l,r]\)没有限制的贡献数。设\(n\)的长度为\(len\),考虑先求出\([1,i](i\lelen-1)\)的贡献(是没有限制的),那么每次枚举第\(1\)位数字\(a_1\in[1,9]\),算上\(F(2,i)\)的贡献即可。则该情况贡献和为:\[\su......
  • P10528 [XJTUPC2024] 崩坏:星穹铁道 题解
    求方案数,分多种情况,不难想到DP。设\(dp_{i,j}\)表示已经行动\(i\)次,剩余战技点个数为\(j\)的方案数,容易得到以下转移方程。\(a_i=1\)时,有\[dp_{i,j}=\begin{cases}0,&j=0,\\dp_{i-1,j-1},&1\leqslantj\leqslant4,\\dp_{i-1,j-1}+dp_{i......
  • canvas 如何自动去换行
    在HTMLcanvas上绘制文本时,如果文本超出了canvas的宽度,它不会自动换行。要实现自动换行,你需要手动计算文本的长度并在适当的位置进行换行。以下是一个简单的JavaScript函数,它使用canvas的measureText方法来计算文本的长度,并在达到指定宽度时自动换行:functionwrapText(context,......
  • LGP10702 [SNCPC2024] 下棋题解
    P10702[SNCPC2024]下棋本蒟蒻的第一篇题解定位博弈论(nim)+进制转换相关知识OIWIKI博弈论NIM进制转换正题读题所有k进制下所有数位的乘积为自身因子的数。他称之为LNC数。给出x枚棋子,然后LNC选定一个整数k(k≥2)。随后他们交替取走若干枚棋子,要求取走的棋......
  • 方案开发——智控打气泵pcba控制板
    新能源电车市场这两年热闹非凡,引无数科技公司跟风进入,从而带动了汽车轮胎智控打气泵方案市场。智控打气泵方案是通过内部马达的运转来工作。抽气时,连通器的阀门被大气的气压冲开,气体进入气筒,而向轮胎中打气时,阀门又被气筒内的气压关闭,气体就进入了轮胎中。这是利用大气压......
  • Go 使用gRPC协议操作RocketMQ 5.3
    docker-compose安装RocketMQdocker-compose.ymlversion:'3.8'services:namesrv:image:apache/rocketmq:5.3.0container_name:rmqnamesrvports:-9876:9876networks:-rocketmqcommand:shmqnamesrvbroker:i......
  • P10559 [ICPC2024 Xi'an I] The Last Cumulonimbus Cloud 题解
    这种题有一个常见的根号分治做法:设\(d\)为度数,显然有\(O(1)\)修改单点,\(O(d)\)查询邻域和\(O(d)\)修改邻域,\(O(1)\)查询单点两种暴力。对度数大于\(\sqrtn\)的点使用前者,度数小于等于\(\sqrtn\)的点使用后者,可以做到\(O(m\sqrtn)\)的时间复杂度。这种做法的本......
  • P9145 [THUPC 2023 初赛] 世界杯
    [题目通道]([THUPC2023初赛]世界杯-洛谷)简要题意:输出五常中的最强球队。众所周知,每个国家的球队都有自己的长处,在不同规则下最强球队也有所不同。而小M制定的规则是输球场数最少,这是有道理的,因为输球场数可以评判一个球队的稳定性。输球场数越少,就说明稳定性越强,实力......
  • 声音克隆GPT-SoVITS 2.0软件和详细的使用教程!
    天命人,请允许我先蹭个热点!  原始声音:播放克隆声音:播放 文章写了一半,被《黑神话悟空》刷屏了。突发奇想,用里面的声音来做个素材试试看。B站捞了一点声音素材,随便剪一剪,训练一把过,没有调优,就直接拿来用了。情绪还差点意思,音色克隆的还不错。......
  • PCIe学习笔记(27)
    LinkStatusDependencies(链路状态依赖关系)DL_Down状态下的事务层行为DL_Down状态表示链路上没有与其他组件的连接,或者与其他组件的连接已经丢失,并且无法通过物理层或数据链路层恢复。本节指定了当DPC未被触发并且数据链路层向事务层报告DL_Down状态时,事务层的行为,表示链路不......