关于前端:PixiJS起步

49次阅读

共计 813 个字符,预计需要花费 3 分钟才能阅读完成。

我的项目搭建

在你开始写任何代码之前,给你的工程创立一个目录,这里我的我的项目文件夹名称叫 pixi-demo,应用 Visual Studio Code 编辑器关上该文件夹

装置 Pixi

Pixi 官网:http://www.pixijs.com/
这个教程应用的版本是 v4.5.5
你能够抉择应用 Pixi v4.5.5 的发布页面的 pixi.min.js 文件,或者从 Pixi 的版本列表中获取最新版本。

  • 在文件夹 pixi-demo 下创立一个根底的 HTML 页面 (index.html )
  • 在文件夹 pixi-demo 下新建 js 文件夹,将之前下载的 pixi.min.js 文件放在 js 文件夹下
  • 编写 index.html 文件,应用 <script> 标签去加载 pixi.min.js 文件。<script> 标签的 src 属性应该是你根目录文件的相对路径。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>pixi-demo</title>
  </head>
  <body>
    <!-- 引入 pixi -->
    <script src="js/pixi.min.js"></script>
    <script type="text/javascript">
      // 判断以后浏览器是否反对 WebGL,反对则应用 WebGL 渲染,反之应用 canvas 渲染
      let type = "WebGL";
      if (!PIXI.utils.isWebGLSupported()) {type = "canvas";}
      PIXI.utils.sayHello(type);
    </script>
  </body>
</html>
  • 编写结束应用 Visual Studio Code 的插件 Live Server 右键 Open with Live Server 关上 index.html
  • 如果 Pixi 连贯胜利,浏览器控制台会显示:
PixiJS 4.5.5 - WebGL - http://www.pixijs.com/

正文完
 0