主要就是三个步骤:
- 选择一个引擎:pixi,实际上就一个js库
- 搭建一个简易的本地服务器,只是为了能够以http形式访问,越简单越好
参考文章:快速搭建一个本地服务器 - 编写一个demo
<!doctype html>
<html>
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
</head>
<body>
<h1>Hello PixiJS</h1>
</body>
<script>
// 1.创建应用窗口
// 指定宽度/高度,单位:像素px
//app:应用窗口在程序中的名称
var app = new PIXI.Application(500, 700);
// 讲应用窗口添加到页面中
// document:网页
// body:可以显示的内容
// appendChlid:追加一个组件
// (app.view):应用窗口的界面
// 在网页中追加一个函数app的视图组件
document.body.appendChild(app.view);
let sprite = PIXI.Sprite.from('sample.png');
app.stage.addChild(sprite);
</script>
</html>
注意:图片的换成自己的。
效果: