当前位置: 首页 > news >正文

第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'},
});

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

相关文章:

第2讲:pixi.js 绘制HelloWorld

基于第0讲和第1讲&#xff0c;我们增添了vite.config.ts文件。并配置了其他的http端口。 此时&#xff0c;我们删除掉没用的东西。 删除 conter.ts、typescript.svg 在main.ts中改成如下内容&#xff1a; import {Application, Text} from pixi.js import ./style.css// 指明…...

golang HTTP2 https测试POST变GET问题小记

概述 因为工作需要协助修改某个golang程序&#xff0c;添加双向认证。但是在调整的过程遇到一个HTTP POST请求变成GET诡异的问题&#xff0c;最后各种搜索&#xff0c;总算解决&#xff0c;博文记录&#xff0c;用于备忘。 代码 服务端 因工作内容&#xff0c;代码有删减&a…...

Linux下的lvm镜像与快照

lvm镜像(mirror) (1)划分三个PV&#xff0c;其中2个PV大小要一模一样 Disk /dev/sdb: 21.5 GB, 21474836480 bytes 255 heads, 63 sectors/track, 2610 cylinders Units cylinders of 16065 * 512 8225280 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/…...

嵌入式linux系统中SPI子系统原理分析01

大家好,今天给大家分享一下,如何使用linux系统中的SPI通信协议,实现主从设备之间的信息传递。 SPI是一种常见的设备通用通信协议。它是一个独特优势就是可以无中断发送数据,可以连续发送或接收任意数量的位。而在I2C和UART中,数据以数据包的形式发送,有限定位数。 …...

Part 4.2 背包动态规划

->背包模型模板(0/1,分组&#xff0c;完全&#xff0c;多重)<- [NOIP2018 提高组] 货币系统 题目背景 NOIP2018 提高组 D1T2 题目描述 在网友的国度中共有 n n n 种不同面额的货币&#xff0c;第 i i i 种货币的面额为 a [ i ] a[i] a[i]&#xff0c;你可以假设每…...

Elasticsearch-使用Logstash同步Mysql

1.安装logstash es服务器版本必须和logstash版本一致 7.9.2 在/usr/local/src/下新建logstash文件夹&#xff0c;解压 下载logstash后查看是否安装成功&#xff0c;在logstash的bin目录下输入指令&#xff1a; ./logstash -e input { stdin { } } output { stdout {} }2.my…...

6.17作业

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

算法思想个人总结(结合生活理解)

主要思想: 结合生活和游戏理解思想,先知道什么场景用什么算法,然后再理解就能记住 遇到问题可以考虑选择使用,这样才是学活了 https://www.yuque.com/yuqueyonghu5znoyv/ifb5ga/nfcvg3ft9ryuqeem?singleDoc# 《元启发式算法》...

openh264 帧间预测编码过程源码分析

openh264 OpenH264 是一个开源的 H.264 编码和解码器&#xff0c;由思科系统开发并维护。它专为实时应用程序如 WebRTC 设计&#xff0c;提供了从基础到高级特性的广泛支持。OpenH264 的编码器支持从 Constrained Baseline Profile 到 5.2 级别&#xff0c;允许任意分辨率的编…...

Linux网络 - HTTP协议

文章目录 前言一、HTTP协议1.urlurl特殊字符 requestrespond 总结 前言 上一章内容我们讲了在应用层制定了我们自己自定义的协议、序列化和反序列化。 协议的制定相对来讲还是比较麻烦的&#xff0c;不过既然应用层的协议制定是必要的&#xff0c;那么肯定已经有许多计算机大佬…...

面试题——Nginx

1.Nginx是什么&#xff1f; 是一个高性能的Web服务器和反向代理服务器&#xff0c;也可以作为静态文件的缓存服务器&#xff0c;也能够进行负载均衡。 2.Nginx的作用&#xff1f; 1.反向代理&#xff1a;将多台服务器代理为一台服务器。客户端不了解底层服务端。 2.负载均衡…...

持续学习的综述: 理论、方法与应用

摘要 为了应对现实世界的动态&#xff0c;智能系统需要在其整个生命周期中增量地获取、更新、积累和利用知识。这种能力被称为持续学习&#xff0c;为人工智能系统自适应发展提供了基础。从一般意义上讲&#xff0c;持续学习明显受到灾难性遗忘的限制&#xff0c;在这种情况下…...

跨域资源共享(CORS)问题与解决方案

跨域资源共享&#xff08;CORS&#xff0c;Cross-Origin Resource Sharing&#xff09;是现代web开发中常见且重要的一个概念。它涉及到浏览器的同源策略&#xff08;Same-Origin Policy&#xff09;&#xff0c;该策略用于防止恶意网站从不同来源窃取数据。然而&#xff0c;在…...

实用软件分享-----一款免费的人工智能替换face的神器

专栏介绍:本专栏主要分享一些实用的软件(Po Jie版); 声明1:软件不保证时效性;只能保证在写本文时,该软件是可用的;不保证后续时间该软件能一直正常运行;不保证没有bug;如果软件不可用了,我知道后会第一时间在题目上注明(已失效)。介意者请勿订阅。 声明2:本专栏的…...

不可思议!这款 Python 库竟然能自动生成GUI界面:MagicGUI

目录 什么是MagicGUI&#xff1f; ​编辑 MagicGUI的工作原理 安装MagicGUI 创建你的第一个GUI ​编辑 其他案例 输入值对话框 大家好&#xff0c;今天我们来聊一聊一个非常有趣且实用的Python库——MagicGUI。这个库可以让你用最少的代码&#xff0c;快速创建图形用户…...

论文发表CN期刊《高考》是什么级别的刊物?

论文发表CN期刊《高考》是什么级别的刊物&#xff1f; 《高考》是由吉林省长春出版社主管并主办的省级教育类期刊&#xff0c;期刊以科教兴国战略为服务宗旨&#xff0c;专门反映和探索国内外教育教学和科研实践的最新成果。该期刊致力于为广大教育工作者提供一个高质量的学术…...

离散数学复习

1.关系的介绍和性质 &#xff08;1&#xff09;序偶和笛卡尔积 两个元素按照一定的顺序组成的二元组就是序偶&#xff0c;使用尖括号进行表示&#xff0c;尖括号里面的元素一般都是有顺序的&#xff1b; 笛卡尔积就是有两个集合&#xff0c;从第一个集合里面选择一个元素&am…...

华为网络设备高频命令

1.system-view • 用法&#xff1a;在用户视图下执行 system-view 命令。 • 作用&#xff1a;进入系统视图&#xff0c;以便进行配置性的操作。 • 场景&#xff1a;当需要对设备进行系统级的配置时。 2.sysname XXX • 用法&#xff1a;执行 [Huawei]sysname XXX 命令。…...

信友队:南风的收集

C. [202406C]楠枫的收集 文件操作 时间限制: 1000ms 空间限制: 262144KB 输入文件名: 202406C.in 输出文件名: 202406C.out Accepted 100 分 题目描述 一年四季&#xff0c;寒暑交替&#xff0c;楠枫总是会收集每一个季节的树叶&#xff0c;并把它们制作成标本收集起来。当…...

找工作小项目:day16-重构核心库、使用智能指针(3)

day16-重构核心库、使用智能指针&#xff08;3&#xff09; 最后将使用这个库的方式进行展示。 1、客户端 在while ((o getopt(argc, argv, optstring)) ! -1)所有的操作都是获取参数的操作&#xff0c;threads 、msgs 和wait 分别指线程数、消息长度以及等待时间。 创建一…...

怎样免费解锁12种加密音乐格式:开源工具完整使用指南

怎样免费解锁12种加密音乐格式&#xff1a;开源工具完整使用指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https:…...

《机密计算破局政务金融、截图工具漏洞泄露NTLM哈希、智能体仿冒日增200+:AI安全的三场“攻防战”》

一、全链路机密计算破局&#xff1a;政务/金融敏感数据进入“可信推理”时代当前&#xff0c;大模型落地过程中面临的核心矛盾在于&#xff1a;越是高价值的专业技术领域&#xff0c;其训练数据和实时推理数据的安全级别就越高。在政务场景中&#xff0c;政府规划、财政数据、内…...

星闪测距性能分析

环境HiSpark开发平台&#xff0c;两块BS21E丢包率1分钟内75次测距数据中&#xff0c;约有6次左右的数据是无效或者丢失&#xff0c;可以通过一些滤波算法过滤&#xff0c;完全可以满足小车定位的需要。测距精度目前使用的测距方案是RSSI信号强度与IQ信号结合&#xff0c;精度达…...

从“左撇子困境”看包容性设计:打破设计偏见,提升产品普适性

1. 设计中的“左撇子困境”&#xff1a;一个被忽视的普适性问题作为一名在硬件设计和产品开发领域摸爬滚打了十几年的工程师&#xff0c;我经常和团队讨论“用户体验”和“人机工程学”。这些词听起来高大上&#xff0c;但它们的本质&#xff0c;往往就藏在一些最不起眼的日常细…...

【实战复盘】Win11 23H2 微信图片拖拽至抖店失效:跨越注册表修复的降级排障SOP

一、 故障描述与初始环境故障现象&#xff1a;用户无法将微信聊天窗口内的图片&#xff0c;直接拖拽至“抖店工作台”聊天输入框中&#xff0c;系统表现为拖拽操作被拦截或无响应。故障环境&#xff1a;Windows 11 23H2 版本。前置历史&#xff1a;该故障电脑此前拖拽功能正常&…...

Cursor聊天数据恢复工具:原理、实操与避坑指南

1. 项目概述&#xff1a;数据恢复的“后悔药”在数字创作的世界里&#xff0c;我们与工具的交互正变得越来越智能和复杂。Cursor&#xff0c;这款集成了AI辅助编程能力的编辑器&#xff0c;已经成为了许多开发者和技术写作者的主力工具。它不仅仅是写代码&#xff0c;更是一个集…...

从TTP223到JL523:低成本电容触摸按钮的选型与实战

1. 电容触摸按钮入门&#xff1a;从原理到选型 第一次接触电容触摸按钮是在五年前的一个智能台灯项目上。当时为了给台灯添加一个酷炫的触摸开关&#xff0c;我试遍了市面上各种方案&#xff0c;最终锁定了TTP223这颗经典芯片。没想到几年后&#xff0c;国产的JL523给了我更大的…...

校企合作奖学金与实习计划:破解半导体硬件人才困境的务实路径

1. 行业人才困境的根源与一个被忽视的解法最近和几位在半导体、硬件设计领域摸爬滚打了十几年的老朋友聊天&#xff0c;话题不出意外地又绕回了“招人难”。从深圳的硬件创业公司&#xff0c;到上海的外企研发中心&#xff0c;再到西安的老牌研究所&#xff0c;几乎所有人都在抱…...

一滴血预警眼底病变!NFL 全程评估糖尿病视网膜病变

核心结论&#xff1a;本研究通过眼内液与血浆多组学联合分析&#xff0c;证实神经丝轻链&#xff08;NFL&#xff09;是可通过血浆微创检测、覆盖糖尿病视网膜病变全病程的保守生物标志物&#xff0c;能有效预测发病及糖尿病血管并发症风险。一、研究概况该研究发表于糖尿病领域…...

LeAgent多智能体协作框架:从任务规划到实战部署的完整指南

1. 项目概述&#xff1a;当AI学会“派活”&#xff0c;一个智能体协作框架的诞生最近在折腾AI智能体&#xff08;Agent&#xff09;开发的朋友&#xff0c;估计都绕不开一个核心痛点&#xff1a;单个智能体能力再强&#xff0c;面对复杂任务也常常力不从心。比如&#xff0c;你…...