第2讲:pixi.js 绘制HelloWorld

基于第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.rhkb.cn/news/352487.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数组元素的内存地址计算【数据结构与算法C#版】

数组元素被存储在连续的内存空间中&#xff0c;这意味着计算数组元素的内存地址非常容易。给定数组内存地址&#xff08;首 元素内存地址&#xff09;和某个元素的索引&#xff0c;我们可以使用下方图 所示的公式计算得到该元素的内存地址&#xff0c;从而直接 访问该元素。 观…

C# Winform图形绘制

WinForms 应用程序中的控件是基于窗体的&#xff0c;当控件需要重绘时&#xff0c;它会向父窗体发送一个消息请求重绘。但是&#xff0c;控件本身并不直接处理绘制命令&#xff0c;所以你不能直接在控件上绘制图形。 解决方法&#xff1a; 重写控件的OnPaint方法使用CreateGr…

五大维度大比拼:ChatGPT比较文心一言,你的AI助手选择指南

文章目录 一、评估AI助手的五个关键维度二、ChatGPT和文心一言的比较 评估AI助手的五个关键维度&#xff0c;以及ChatGPT和文心一言的比较如下&#xff1a; 一、评估AI助手的五个关键维度 界面友好性 &#xff1a; 评估标准&#xff1a;用户界面是否直观易用&#xff0c;是否…

Java基础 - 练习(一)打印等腰三角形

Java基础练习 打印等腰三角形&#xff0c;先上代码&#xff1a; public static void main(String[] args) {// 打印等腰三角形System.out.println("打印等腰三角形&#xff1a;");isoscelesTriangle(); } public static void isoscelesTriangle() {// for循环控制行…

探索未来工作新伙伴:机器人流程自动化(RPA)揭秘

想象一下&#xff0c;如果你的日常工作中那些繁琐、重复的任务&#xff0c;比如数据录入、文件整理、邮件发送等&#xff0c;都能自动完成&#xff0c;你将拥有更多时间专注于真正需要创造力和智慧的工作&#xff0c;是不是听起来就像拥有了一个私人助理&#xff1f;这并不是遥…

数据结构之线性表(3)

数据结构之线性表&#xff08;3&#xff09; 上文我们了解了线性表的静动态存储的相关操作&#xff0c;此篇我们对线性表中链表的相关操作探讨。 在进行链表的相关操作时&#xff0c;我们先来理解单链表是什么&#xff1f; 1.链表的概念及结构 链表是一种物理存储结构上非连…

C++命名空间

命名空间(namespace)的目的&#xff1a;对标识符的名称进行本地化&#xff0c;以避免命名冲突或者名字污染 #include<stdio.h> #include<stdlib.h>int rand 0; int main() { //C语言没有办法解决类似这种的命名冲突&#xff0c;而C提出了namespace来解决printf(&…

【日常记录】【vue】vite-plugin-inspect 插件的使用

文章目录 1、vite-plugin-inspect2、安装3、使用4、链接 1、vite-plugin-inspect vite-plugin-inspect 可以让开发者在浏览器端就可以看到vue文件编译后的代码、vue文件的相互依赖关系 2、安装 npm i -D vite-plugin-inspect// vite.config.ts import Inspect from vite-plugi…

6.17作业

升级优化自己应用程序的登录界面。 要求&#xff1a; 1. qss实现 2. 需要有图层的叠加 &#xff08;QFrame&#xff09; 3. 设置纯净窗口后&#xff0c;有关闭等窗口功能。 4. 如果账号密码正确&#xff0c;则实现登录界面关闭&#xff0c;另一个应用界面显示。 //发送端头文件…

AI + 3D:用单个图像和文本提示创建可交互的3D世界

你是否曾经梦想过只需一张照片和一些简单的文字描述,就能立即进入一个生动的3D虚拟世界?今天,我们将介绍一个革命性的技术,它就像是一台神奇的3D场景制造机,能够根据你的想象快速构建出令人惊叹的虚拟空间。 一、技术概览 这项技术不仅仅是一个简单的图像到3D的转换工具…

计算机组成原理(四)Cache存储器

文章目录 Cache存储器的基本原理cache命中率、平均访问时间、效率地址映射全相联映射直接映射组相联映射 查找算法cache 存储器替换策略cache 存储器-写操作策略习题 Cache存储器的基本原理 Cache是一种高速缓冲寄存器&#xff0c;是为了解决CPU和主存之间速度不匹配而采用的一…

Stable Diffusion基础:ControlNet之细节替换

本文继续给大家分享 Stable Diffusion 的基础能力&#xff1a;ControlNet之细节替换&#xff0c;故事的主角是 Tile。 Tile 的原意是瓦片、瓷砖。作为 ControlNet&#xff0c;它会对参考图进行分块&#xff0c;并识别出区块内的对象。如果提示词和区块内的对象匹配&#xff0c…

高考志愿填报:选择好专业还是好学校?

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 高考志愿填报&#xff1a;选择好专业还是好学校&#xff1f; 每年高考结束后&#xff0c;考生和家长面临的一个…

【深度学习】AI换脸,EasyPhoto: Your Personal AI Photo Generator【一】

论文&#xff1a;https://arxiv.org/abs/2310.04672 文章目录 摘要IntroductionTraining Process3 推理过程3.1 面部预处理3.3 第二扩散阶段3.4 多用户ID 4 任意ID5 实验6 结论 下篇文章进行实战。 摘要 稳定扩散Web UI&#xff08;Stable Diffusion Web UI&#xff0c;简称…

LabVIEW进行图像拼接的实现方法与优化

在工业检测和科研应用中&#xff0c;对于大尺寸物体的拍摄需要通过多次拍摄后进行图像拼接。LabVIEW 作为强大的图形化编程工具&#xff0c;能够实现图像拼接处理。本文将详细介绍LabVIEW进行图像拼接的实现方法、注意事项和提高效率的策略。 图像拼接的实现方法 1. 图像采集…

30.保存游戏配置到文件

上一个内容&#xff1a;29.添加录入注入信息界面 以 29.添加录入注入信息界面 它的代码为基础进行修改 效果图&#xff1a; 首先在我们辅助程序所在目录下创建一个ini文件 文件内容 然后首先编写一个获取辅助程序路径的代码 TCHAR FileModule[0x100]{};GetModuleFileName(NUL…

ByteTrack

1. 论文中伪代码表示的流程图 2. 简要版 此图源自&#xff1a; ByteTrack多目标跟踪原理&#xff0c;白老师人工智能学堂 3. 详细版 根据ByteTrack-CPP-ncnn代码的数据流画的较为详细的流程图&#xff1a; 4. ByteTrack-CPP-ncnn的UML类图 Reference ByteTrack多目标跟踪原…

事务性邮件与营销邮件有什么区别

在数字化时代&#xff0c;电子邮件已成为商务沟通不可或缺的工具。然而&#xff0c;并非所有的邮件都旨在销售产品或服务。事务性邮件和营销邮件&#xff0c;虽然都通过电子邮件这一渠道传播&#xff0c;但它们的目的、风格和结构却大相径庭。U-Mail将深入探讨这两种邮件的区别…

cve_2014_3120-Elasticsearch-rce-vulfocus靶场

1.背景 来源&#xff1a;ElasticSearch&#xff08;CVE-2014-3120&#xff09;命令执行漏洞复现_mvel 漏洞-CSDN博客 参考&#xff1a;https://www.cnblogs.com/huangxiaosan/p/14398307.html 老版本ElasticSearch支持传入动态脚本&#xff08;MVEL&#xff09;来执行一些复…

React入门教程:构建你的第一个React应用

在当今快速发展的Web开发领域&#xff0c;前端技术日新月异&#xff0c;而React作为一款强大的JavaScript库&#xff0c;已经成为众多开发者的首选。React以其组件化、高效的性能和灵活的数据处理机制闻名于世&#xff0c;被广泛用于构建动态且复杂的用户界面。在本教程中&…