学JS的心路历程 - PixiJS -基础（一）

建立canvas

今天开始我们一步步来看怎么使用PixiJS吧！

在开始之前，要先提醒各位需要先运行webserver，否则将会遇到一些奇怪的问题喔！

最基本的canvas画布是肯定需要的，Pixi提供了PIXI.Application建构式方便我们建立。

let app = new PIXI.Application（800，600，{backgroundColor：0x1099bb}）；

document.body.appendChild（app.view）；

PIXI.Application在被建立同时也会自动建立renderer，ticker和root container。

renderer -优先使用WebGL渲染如果不允许则用Canvas渲染

ticker -渲染的更新频率(vmwork)

stage - PIXI容器物件，是所有可见物件的根容器

PIXI.Application会取决于浏览器支持程度选择使用WebGL或Canvas渲染图片。

如果想要确认是用WebGL还是Canvas模式的话，最快速的方式就是打开console观看。

当然也能用程序来判断：

console.log（PIXI.utils.isWebGLSupported（））；//回传目前页面是否支持WebGL；

console.log（app.renderer.type）；//回传目前PixiJS app的renderer模式：

// PIXI.RENDERER_TYPE，值为0、1、2

console.log（PIXI.RENDERER_TYPE）；// {UNKNOWN: 0，WEBGL: 1，CANVAS: 2}

而PIXI.Application物件可以传入options物件的参数来设定宽、高、背景颜色等等。

想全部了解可以看官方文件

背景颜色要注意到只能使用「十六进制颜色」，是0x000000 ~ 0xffffff数字。

在创立完后透过document.body.appendChild添加到HTML body后就可以看到说，

一张canvas就这样被轻松建立出来了（我觉得这是在废话…）。

接着，我们来尝试添加图片到canvas中。

添加图片

要能让图片显示在Pixi的canvas中必须把图片添加进PIXI的stage物件中。

可以这样使用：

app.stage

在把图片放进stage前，需要先把图片转成Sprite的特殊图片物件。

我们能利用程序控制Sprite的大小及位置，可以透过下列三种方式建立Sprite：

单一图片

Sprite图片

这种类型的图片称作Sprite图片

图片来源：How to build a simple sprite animation in JavaScript

texture atlas -经由JSON定义大小和位置的Sprite图片

这边我们先用单一图片来简单讲解

let app = new PIXI.Application（800，600，{backgroundColor：0x1099bb}）；

let imageURL =“./image/bunny.png”；

let bunny = PIXI.Sprite.fromImage（imageURL）；

document.body.appendChild（app.view）；

app.stage.addChild（bunny）；

我们先用PIXI.Sprite.fromImage把图片转成Sprite物件后，再经由app.stage.addChild将图片显示在canvas上。

原始图有点小，就撷取一小部分显示了。

这边要注意到的是，如果图片来源使用外部来源像是imgur或其他网址的话，会遇到CORS跨域问题。

由于本篇是在讲解如何使用PixiJS，在之后的示例都会采引入本机图片的方式，对CORS有兴趣的各位可以看这篇文章的讲解喔！

前端菜焦阿日记|D10| Web Server -跨域请求(leafor)

那么今天就先到这边，一样如果有错误及来源未附上欢迎留言指正，我们明天见！