第2讲:pixi.js 绘制HelloWorld

news2024/10/5 15:28:44

基于第0讲和第1讲,我们增添了vite.config.ts文件。并配置了其他的http端口。
此时,我们删除掉没用的东西。
删除 conter.ts、typescript.svg

在main.ts中改成如下内容:

import {Application, Text} from 'pixi.js'
import './style.css'

// 指明Application的类型是一个HTML的Canvas, 也就是HTMLCanvasElement
let app = new Application<HTMLCanvasElement>();
document.body.appendChild(app.view)

let text = new Text('Hello World', {
  fill: 0x00FF00
});

app.stage.addChild(text);

在style.css中,删除所有代码,并且添加如下代码:

body{
  margin: 0
}

然后在package.json中点击Debug,启动了localhost:7777
这是我的vite.config.ts配置:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 7777,
    host: '0.0.0.0'
  },
});

最后在浏览器中查看:
在这里插入图片描述

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

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

相关文章

Aeron:Aeron Agent

Aeron Agent 是一个 Java 代理&#xff0c;用于提供 Aeron、Aeron Archive 和 Aeron Cluster 中发生的运行时低级日志信息。这些日志语句包括从高级管理员事件到大容量数据帧事件。 在调试 Archive 和 Cluster 问题时&#xff0c;Aeron Agent 的日志数据尤其有用。 一、Availab…

github国内加速访问有效方法

这里只介绍实测最有效的一种方法&#xff0c;修改主机的Hosts文件&#xff0c;如果访问github网站慢或者根本无法访问的时候可以采用下面方法进行解决。 1、搜索一个IP查询网站 首先百度搜索选择一个IP查询的网站&#xff0c;这里我用下面这个网站&#xff08;如果该网站失效…

shop APP UI

APP和微信小程序不一样&#xff0c; APP的客户端需要两个(一个安卓&#xff0c;一个苹果IOS); APP的服务端需要&#xff08;管理端后台&#xff0c;接口&#xff09;&#xff1b;

分布式理论与设计 三、分布式一致性协议

1.两阶段提交协议&#xff08;2PC&#xff09; 1&#xff09;两阶段提交协议 两阶段提交协议&#xff0c;简称2PC(2 Prepare Commit)&#xff0c;是比较常用的解决分布式事务问题的方式&#xff0c;要么所有参与进程都提交事务&#xff0c;要么都取消事务&#xff0c;即实现A…

Xlua三方库Android编译出错解决办法

Xlua三方库Android编译出错解决办法 最近听老师的热更教程&#xff0c;讲到xlua编译android平台会报错&#xff0c;也是看了老师的博客&#xff0c;按照方法去解决&#xff0c;然而问题并没有解决。应该是因为代码更新或者版本不一样&#xff0c;在此简单记录一下解决过程。 参…

SpringBoot三层架构

目录 一、传统方式 二、三层架构 三、代码拆分 1、dao层 2、service层 3、control层 四、运行结果 一、传统方式 上述代码存在一定的弊端&#xff0c;在进行软件设计和软件开发中提倡单一责任原则&#xff0c;使代码的可读性更强&#xff0c;复杂性更低&#xff0c;可扩展性…

【Linux硬盘数据读取】WIN10访问linux分区解决方案:ext2fsd

<div id"content_views" class"htmledit_views" style"user-select: auto;"><p>尝试ext2explore、Paragon ExtFS都不好用&#xff0c;强烈安利ext2fsd&#xff0c;可读写&#xff0c;很强大</p> 转自&#xff1a;https://blog…

超高清图像生成新SOTA!清华唐杰教授团队提出Inf-DiT:生成4096图像比UNet节省5倍内存。

清华大学唐杰教授团队最近在生成超高清图像方面的新工作&#xff1a;Inf-DiT&#xff0c;通过提出一种单向块注意力机制&#xff0c;能够在推理过程中自适应调整内存开销并处理全局依赖关系。基于此模块&#xff0c;该模型采用了 DiT 结构进行上采样&#xff0c;并开发了一种能…

JMU 数科 数据库与数据仓库期末总结(4)实验设计题

E-R图 实体-关系图 E-R图的组成要素主要包括&#xff1a; 实体&#xff08;Entity&#xff09;&#xff1a;实体代表现实世界中可相互区别的对象或事物&#xff0c;如顾客、订单、产品等。在图中&#xff0c;实体通常用矩形表示&#xff0c;并在矩形内标注实体的名称。 属性…

Java项目:基于SSM框架实现的汽车养护保养管理系统【ssm+B/S架构+源码+数据库+开题+毕业论文+任务书】

一、项目简介 本项目是一套基于SSM框架实现的汽车养护保养管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、…

VirtualBox 安装UOS统信服务器操作系统

1、准备 1.1安装VirtualBox 由于过程简单&#xff0c;不做赘述&#xff01; 1.2下载UOS服务器版本 下载免费版本即可 服务器与云计算操作系统-统信软件 (uniontech.com)https://uniontech.com/os-serverCloud.html 2、安装 2.1新建虚拟机 2.2选择虚拟机模式&#xff0c;这…

pandas 根据关键词从表格属性进行筛选企业

文章目录 背景实战情况一情况二 背景 最近一段时间在做企业分类的实验&#xff0c;给定一个企业信息表&#xff0c;利用关键词从企业名称和经营范围中筛选相关企业。 情况一&#xff1a;企业名称和经营范围任何一个包含关键词&#xff1b; 情况二&#xff1a;企业名称和经营范…

飞天茅台酒的惊魂五日

“电商百亿补贴修改发货规则”导致黄牛资金压力剧增&#xff0c;资金压力之下部分黄牛择低价甩卖&#xff0c;其他求货的酒行、大酒商则选择观望&#xff0c;价格下行压力最终扩散&#xff0c;造成整个回收市场踩踏&#xff0c;价格急速下跌。 不到半年时间&#xff0c;飞天茅台…

flink1.12.0学习笔记(七)-监控与优化

flink1.12.0学习笔记第 7 篇-监控与优化 7-1-Flink-Metrics 1.Metrics介绍 由于集群运行后很难发现内部的实际状况&#xff0c;跑得慢或快&#xff0c;是否异常等&#xff0c;开发人员无法实时查看所有的 Task 日志&#xff0c;比如作业很大或者有很多作业的情况下&#xff…

【C++进阶学习】第二弹——继承(下)——挖掘继承深处的奥秘

继承&#xff08;上&#xff09;&#xff1a;【C进阶学习】第一弹——继承&#xff08;上&#xff09;——探索代码复用的乐趣-CSDN博客 前言&#xff1a; 在前面我们已经讲了继承的基础知识&#xff0c;让大家了解了一下继承是什么&#xff0c;但那些都不是重点&#xff0c;今…

半监督学习

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 介绍一、Self Training自训练1、介绍2、代码示例3、参数解释 二、Label Propagation&#xff08;标签传播&#xff09;1、介绍2、代码示例3、参数解释 三、Label Spread…

突然挣不到钱了?带货主播大降薪,有人收入“腰斩”!时薪低至20元,“不如街头发小广告”

韭菜都想来割韭菜了&#xff0c;从00后到60后都在直播带货&#xff0c;部分业内人士认为不懂行的商家以及海量素人主播的加入&#xff0c;拉低了行业的平均薪酬。 2024年的电商年中大促接近尾声&#xff0c;电商直播市场再次成为广为关注的焦点。然而&#xff0c;与热闹的“618…

解放代码:识别与消除循环依赖的实战指南

目录 一、对循环依赖的基本认识 &#xff08;一&#xff09;代码中形成循环依赖的说明 &#xff08;二&#xff09;无环依赖的原则 二、识别和消除循环依赖的方法 &#xff08;一&#xff09;使用JDepend识别循环依赖 使用 Maven 集成 JDepend 分析报告识别循环依赖 &a…

C++使用spdlog输出日志文件

参考博客&#xff1a; 日志记录库 spdlog 基础使用_spdlog 写日志-CSDN博客 GitHub - gabime/spdlog: Fast C logging library. 首先在github上下载spdlog源码&#xff0c;不想编译成库的话&#xff0c;可以直接使用源码&#xff0c;将include文件夹下的spdlog文件夹&#x…

CSS选择符和可继承属性

属性选择符&#xff1a; 示例&#xff1a;a[target"_blank"] { text-decoration: none; }&#xff08;选择所有target"_blank"的<a>元素&#xff09; /* 选择所有具有class属性的h1元素 */ h1[class] { color: silver; } /* 选择所有具有hre…