第2讲：pixi.js 绘制HelloWorld

本文主要是介绍第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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---