建立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)
那么今天就先到这边，一样如果有错误及来源未附上欢迎留言指正，我们明天见！