后来知道也可以透过canvas让网页动起来！

而PixiJS是使用WebGL在canvas上绘制内容与制作动态

且同时有下列特色：

支持多点触控

掩码与混合模式

可外加WebGL滤镜

多装置支持

等等，什么是WebGL(sxjlf88)？

WebGL是一种JS的API，让网页能不需使用外挂程序就能在HTML的canvas元素中实现二维及三维渲染。

不过要注意的是，有些浏览器预设会把WebGL关闭，避免太吃性能，要打开可以参照这篇文章How can I enable WebGL in my browser？

这边我示范一下chrome如何打开。

首先，打开硬件加速功能

进入chrome://settings/

接着，启用WebGL

进入chrome://flags/

搜寻WebGL点击启用

最后，确认WebGL状态

进入chrome://gpu/

如果状态不是Hardware accelerated，下方的Problems Detected列表可能会解释原因！

不过前面提到了这么多看起来很赞的特色，想当然就是不能支持太过老旧的浏览器。

或许有人会说，那怎么不用three.js或phaser3呢？

这是因为这两者底层实际上也是用PixiJS，这样你不觉得先学好PixiJS再去学这两者会比较快速吗？

而且PixiJS更新时，three.js及phaser3需要等待一段时间才有办法更新。

就连前段时间很红的

这款游戏也是用PixiJS制作的！

对，你没有听错，Canvas也可以做游戏！

在接下来的四天时间，我将会带各位初步了解PixiJS的语法以及实作，那们我们明天见(leafor)！

学JS的心路历程Day26 - PixiJS -入坑的更多相关文章

  1. 学JS的心路历程Day28 - PixiJS -基础（二）

    材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材 ...

  2. 学JS的心路历程 - PixiJS -基础（三）

    今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, back ...

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

    建立canvas 今天开始我们一步步来看怎么使用PixiJS吧! 在开始之前,要先提醒各位需要先运行webserver,否则将会遇到一些奇怪的问题喔! 最基本的canvas画布是肯定需要的,Pixi提 ...

  4. 学JS的心路历程-闭包closure

    闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这 ...

  5. 学JS的心路历程 -函式（三）this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  6. 学JS的心路历程 - JS应用

    各家电商网站都推出了各种活动和现今优惠券,当时在逛PTT时看到了有篇文章,提供代码教大家用JS的方式抢票,看了一下后发现好像很多人好奇这是怎么做的,于是就想说想一篇文章来讲解一下. 我们先来看一下折价 ...

  7. 学JS的心路历程 - JS的Class

    没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首 ...

  8. 学JS的心路历程-物件与原型（三）

    昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可 ...

  9. 学JS的心路历程 -物件与原型（二）

    昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...

随机推荐

  1. 用vlan实现同一网段的的各部门之间有的可以通信有的不可以通信

    日前老师上课演示一个项目:实现公司同一网段的各个部门之间有的可以通信有的无法通信.我们用的是思科测试软件模拟操作,个人觉得很好用.       在刚开始做这个项目的时候我以为端口是对应的,如图,交换机 ...

  2. php创建临时表

    $sql= "create temporary table yc_linshi ( img varchar(100) not null, openid varchar(50) not nul ...

  3. Android数据传递，使用广播BroadcastReceiver；

    Android数据传递有很多种,Intent意图传递或使用Bundle去传递,接口监听回调传递数据,也可以把数据保存起来,使用的时候去读取等等等...,"当你知道足够多的数据传递的方式之后, ...

  4. firewalld的使用（CentOS7的端口打开关闭）

    1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...

  5. tkinter简单打开网址 + 执行系统命令

    from tkinter import * import webbrowser root = Tk() text = Text(root,width=30,height = 5) text.pack( ...

  6. Java 日期与数字转换

    package com.test; import org.apache.commons.lang.StringUtils; import org.junit.Test; import java.tex ...

  7. 学习笔记：CommonJS规范、AMD规范

    CommonJS规范 http://wiki.jikexueyuan.com/project/webpack-handbook/commonjs.html CommonJS 规范 http://www ...

  8. Mybatis学习4——一对一关联查询方法1--创建实体

    创建一个实体继承两个实体之一,另一个实体作为属性 实体1. order package pojo; import java.util.Date; public class Order { privat ...

  9. SPARK共享变量：广播变量和累加器

    Shared Variables Spark does provide two limited types of shared variables for two common usage patte ...

  10. pycharm 使用print不打印结果问题解决

    参考 http://blog.csdn.net/olfisher/article/details/52486368 参考2 http://www.imooc.com/qadetail/122734 问 ...