第4讲：pixi.js绘制舞台、随窗口大小而改变画布大小和舞台位置

基于前面写的代码，在gamelets的工程目录下新建一个CanvasAndStage.ts
代码如下

import {
   
   Application, Graphics} from 'pixi.js';
// 不要忘了，一定要引用这个css样式，否则就会以默认样式显示
import './style.css'
// app.view就是画布，因为已经指定了泛型：HTMLCanvasElement
let app = new Application<HTMLCanvasElement>();
document.body.appendChild(app.view);

// // 改画布尺寸方法一
// app.renderer.resize(640, 480);

// // 改画布尺寸方法二
// app.view.width = 640;
// app.view.height = 480;


// // app.renderer是渲染器对象
// app.renderer.resize(
//     window.innerWidth, // 视窗内部不含框的宽
//     window.innerHeight // 视窗内部不含框的高
// )

// app.renderer.render(app.stage);


let stageSize = {
   
   
    width: 0,
    height: 0
}

let stageFrame = new Graphics();
app.stage.addChild(stageFrame);

function