后来知道也可以透过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. Android模块化开发、组件化开发；

    模块化开发:优点嘛,项目过大时便于管理: 1.在根目录的gradle.properties文件下添加 isBuildModule=false: 使用isBuildModule来控制这个是Library ...

  2. String.prototype.normalize()

    normalize() 方法会按照指定的一种 Unicode 正规形式将当前字符串正规化. 这是一个ES6方法. 许多欧洲语言有语调符号和重音符号.为了表示它们,Unicode 提供了两种方法.一种是 ...

  3. scrapy中 selenium(中间件) + 语言处理 +mysql

    在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值.但是通过观察我们会发现,通过 ...

  4. lunix 集群,负载均衡,location

       nginx location语法: location支持的语法优先级: 复制代码location匹配顺序 #  www.s14hanju.com/1.location = / {  我是代码1} ...

  5. postgresql copy的使用方式

    方法一: 将数据库表复制到磁盘文件: copy "Test" to 'G:/Test.csv' delimiter ',' csv header encoding 'GBK'; 从 ...

  6. js常用内置对象

    数组Array 1创建方式 var colors = ['red','color','yellow']; var colors2 = new Array(); 2数组的赋值 var arr = []; ...

  7. EF大数据批量处理----BulkInsert

    之前做项目的时候,做出来的系统的性能不太好,在框架中使用了EntityFramework,于是就在网上查资料,研究如何提高EF的性能. 在这分享一篇博客 批量操作提升EntityFramework的性 ...

  8. jquery给按钮绑定事件

    JQuery: $(function(){ $("#btn1").bind("click",function(){ $("#div1").s ...

  9. UML图基础知识

    一.UML简述 类是面向对象系统中最重要的构造块.类图显示了一组类.接口.协作以及他们之间的关系,通过类图,我们能够很好的掌握类与类之间的关系. 首先给出一幅UML类图,此图来源于<大话设计模式 ...

  10. mybatis二（参数处理和map封装及自定义resultMap）

    .单个参数 mybatis不会做特殊处理. #{参数名/任意名}:取出参数值. .多个参数 mybatis会做特殊处理. 多个参数会被封装成 一个map. key:param1...paramN,或者 ...