web中引入live2d的moc3模型-(调整样式)

news2024/11/24 4:27:09

文章目录

  • src文件夹
    • 修改底部背景色
    • 修改背景图片
    • 修改canvas大小和定位

src文件夹

基本所有的样式都在src文件夹下的ts文件中,而我们每次修改样式时,记得重新build,已让页面重新加载修改打包后的js文件

npm run build

修改底部背景色

默认是黑色,这里我改成了透明
在这里插入图片描述

修改背景图片

在这里插入图片描述
在这里插入图片描述

修改canvas大小和定位

在这里插入图片描述

默认整个屏幕的长宽

  public initializeSprite(): void {
    // const fixedWidth: number = 200; // 设置固定宽度
    // const fixedHeight: number = 280; // 设置固定高度
    //
    // canvas.style.position = 'absolute'; // 设置为绝对定位
    // canvas.style.left = '150px'; // 设置左边距
    // canvas.style.bottom = '36px';
    //
    //
    // canvas.width = fixedWidth;
    // canvas.height = fixedHeight;
    const width: number = canvas.width;
    const height: number = canvas.height;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/766406.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

最强,自动化测试框架总结整理,测试进阶之路卷起来...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 自动化测试框架是…

Pytorch:搭建卷积神经网络完成MNIST分类任务:

2023.7.18 MNIST百科: MNIST数据集简介与使用_bwqiang的博客-CSDN博客 数据集官网:MNIST handwritten digit database, Yann LeCun, Corinna Cortes and Chris Burges MNIST数据集获取并转换成图片格式: 数据集将按以图片和文件夹名为标签的…

二、DDL-4.表操作-修改删除

一、修改 1、往表中添加字段 e.g.为emp表增加一个新的字段“昵称”为nickname,类型为varchar(20) alter table emp add nickname varchar(20) comment 昵称; 2、修改表中字段 e.g.将emp表的nickname字段修改为username,类型为varchar(30) alter table e…

TCP/IP网络编程 第十六章:关于IO流分离的其他内容

分离I/O流 两次I/O流分离 我们之前通过2种方法分离过IO流,第一种是第十章的“TCPI/O过程(Routine)分离”。这种方法通过调用fork函数复制出1个文件描述符,以区分输入和输出中使用的文件描述符。虽然文件描述符本身不会根据输入和输…

基于主从博弈的主动配电网阻塞管理的论文复现——附Matlab代码

目录 文章摘要: 编程思路: 研究背景: 基于主从博弈的电网阻塞管理: 算例介绍: Matlab运行结果展示: Matlab代码数据分享: 文章摘要: 随着需求侧灵活性资源在配电网中的渗透率…

SQLite编程操作

一、打开/创建数据库的C接口 ①sqlite3_open ( const char * filename , sqlite3 ** ppDb ) 打开一个指向 SQLite 数据库文件的连接,返回一个用于其他 SQLite 程序的数据库连接对 象。 ②sqlite3_close(sqlite3*) 关闭之前调用 sqlite3_open() 打开的数据…

⛳ Git安装与配置

Git安装配置目录 ⛳ Git安装与配置🏭 一,git的安装🎨 1,下载git👣 2,下载完成之后,双击安装即可。💻 3,更改安装目录(没有中文且没有空格)&#x…

3本期刊被剔除,7月SCIE/SSCI目录已更新 (附2023WOS历次更新目录)~

2023年7月17日,科睿唯安更新了Web of Science核心期刊目录。 此次更新后SCIE期刊目录共包含9498本期刊,SSCI期刊目录共包含3557本期刊。此次SCIE & SSCI期刊目录更新,与上次更新(2023年6月)相比,有4本S…

Shell之循环语句 —— WhileUntil 实验

While While循环语句:满足条件才会执行循环,不满足就结束,用于不知道循环次数,需要主动结束循环或者达到条件循环的场景 While的结构 while(条件判断)——do —— 命令序列 —— done 如:用whi…

Python实现HBA混合蝙蝠智能算法优化卷积神经网络分类模型(CNN分类算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蝙蝠算法是2010年杨教授基于群体智能提出的启发式搜索算法,是一种搜索全局最优解的有效方法…

qiankun框架vue3主应用和子应用生产环境打包部署nginx

首先下载nginx,进行最小化配置 用vscode 打开nginx.conf文件 在http模块的server模块里进行配置 listen 字段监听端口号 http的默认端口号是80(nginx的端口号可以随便写) server_name字段 是ip地址 lochhost就是127.0.0.1 lacation 字段 是在浏览器的地址栏http协议ip地址…

C++类和对象——类的基础

目录 类的引入类的定义类的访问限定符和封装对象的实例化类对象的大小this指针 类的引入 在C语言中,结构体中只能定义变量 但是在C中,结构体不仅可以定义变量,还可以定义函数 下面就是C中的一个结构体: struct Stack {void init(…

【Linux系统 学习笔记】Linux线程互斥 线程安全 可重入 不可重入 死锁

目录 Linux 线程互斥进程线程间互斥相关背景和概念互斥量互斥量的接口互斥量实现原理探究 可重入与线程安全概念常见的线程不安全的情况常见的线程安全的情况常见不可重入的情况常见可重入的情况可重入与线程安全联系可重入与线程安全区别 死锁死锁四个必要条件避免死锁 Linux …

【代码随想录13】前 K 个高频元素

题目 给定一个非空的整数数组,返回其中出现频率前 k 高的元素。 示例 1: 输入: nums [1,1,1,2,2,3], k 2输出: [1,2] 示例 2: 输入: nums [1], k 1输出: [1] 提示: 你可以假设给定的 k 总是合理的,且 1 ≤ k ≤ 数组中不相同的元素…

黑客学习笔记(自学)

一、首先,什么是黑客? 黑客泛指IT技术主攻渗透窃取攻击技术的电脑高手,现阶段黑客所需要掌握的远远不止这些。 二、为什么要学习黑客技术? 其实,网络信息空间安全已经成为海陆空之外的第四大战场,除了国…

C#(六十)之Convert类 和 Parse方法的区别

Convert数据类型转换类,从接触C#开始,就一直在用,这篇日志坐下深入的了解。 Convert类常用的类型转换方法 方法 说明 Convert.ToInt32() 转换为整型(int) Convert.ToChar() 转换为字符型(char) Convert.ToString() 转换为字符串型(st…

优化CSS重置过程:探索CSS层叠技术的应用与优势

目录 下面是正文~~ CSS重置方法 方法的结合 合并方法的问题 通用移除样式 顺序很重要 CSS 优先级 我们的CSS特异性冲突 CSS Layers 来拯救 Sass 预处理器支持 浏览器支持 总结 这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重…

网络安全(黑客技术)最全面的学习笔记

学网络安全如何成为一名黑客呢? 整合了全知识点及学习框架,本篇零基础依然适用! 本篇涵盖内容及其全面,强烈推荐收藏! 一、学习网络安全会遇到什么问题呢? 1、学习基础内容多时间长 学习基础语言太多&…

基于MATLAB的无人机遥感数据预处理与农林植被性状估算教程

详情点击链接:基于MATLAB的无人机遥感数据预处理与农林植被性状估算前言 遥感技术作为一种空间大数据手段,能够从多时、多维、多地等角度,获取大量的农情数据。数据具有面状、实时、非接触、无伤检测等显著优势,是智慧农业必须采…

初中级PHP程序员如何进阶学习?

如果你是一个以PHP为主的开发人员,只会依赖现成的框架进行增删改查,想提高自己又不知道从何下手,你可以花点时间研究一下我这个开源项目:酷瓜云课堂,这个项目以PHPJS 为主,负责主要的业务逻辑,部…