当前位置: 首页 > 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 分别指线程数、消息长度以及等待时间。 创建一…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...