01 pixi.js入门-526互联

写在前面：写该笔记时pixi.js版本为V7.2.4

1. 安装

npm install pixi.js

　　或者

<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js"></script>

　　又或者

<script src="https://unpkg.com/pixi.js@7.x/dist/pixi.min.js"></script>

2. 创建pixi程序

使用npm方式时，注意没有默认导出，正确导出的方法是

import * as PIXI from 'pixi.js';

　　若是使用cdn，则默认导出的对象为PIXI

2.1创建应用程序

let app = new PIXI.Application({
  width: 1000,
  height: 1000,
  backgroundAlpha: 1,    //  背景透明度（背景默认为黑色不透明），0为完全透明，1为不透明
  resolution: window.devicePixelRatio || 1,    // 设备像素比
  hello: true,  Outputs the version and type information of the current renderer in the console
});

　　更多参数请查阅官方文档

2.2 将应用程序视图插入到指定的dom中

$('body').append(app.view);

　　至此，页面中将会显示宽高为1000px的黑色区域

3 创建各种图形

// 创建一个矩形
const graphics1 = new PIXI.Graphics();
graphics1.beginFill('red', 0.1)    // 填充的颜色和透明度
graphics1.drawRect(100, 100, 200, 100);   //  绘制的坐标点和矩形的宽高
graphics1.endFill();    // 结束填充
app.stage.addChild(graphics1);  // 将该矩形添加到根节点中

　　更多的图形绘制请参考官方文档

持续更新中。。。。。。