后来知道也可以透过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. Sebastian Ruder : NLP 领域知名博主博士论文面向自然语言处理的神经网络迁移学习

    Sebastian Ruder 博士的答辩 PPT<Neural Transfer Learning for Natural Language Processing>介绍了面向自然语言的迁 ...

  2. CS229 6.5 Neurons Networks Implements of Sparse Autoencoder

    sparse autoencoder的一个实例练习,这个例子所要实现的内容大概如下:从给定的很多张自然图片中截取出大小为8*8的小patches图片共10000张,现在需要用sparse autoen ...

  3. mybatis 设置新增数据后返回自增主键

    主要是注解@Options起作用,语句如下: @Insert({ "INSERT INTO application_open_up ( " + "app_open_hos ...

  4. StanFord ML 笔记 第九部分

    第九部分: 1.高斯混合模型 2.EM算法的认知 1.高斯混合模型 之前博文已经说明:http://www.cnblogs.com/wjy-lulu/p/7009038.html 2.EM算法的认知 ...

  5. day3----编码-集合-深浅copy-文件操作-函数初识

    本文档主要内容: 一 编码 二 集合 三 深浅copy 四 文件操作 五 函数初识 首先,我们来看看两个字符串的比较 打开cmd,进入dos界面 >>>a='xingchen@' & ...

  6. 读取配置文件properties的几种方式

    介绍几种读取方式:参考:https://www.cnblogs.com/sebastian-tyd/p/7895182.html .基于ClassLoder读取配置文件 注意:该方式只能读取类路径下的 ...

  7. 白鹭引擎 - 显示对象与 HelloWord ( 绘制了一个红蓝相间的 2 x 2 格子 )

    1: 白鹭引擎默认实在一个 640 * 1136 的画布上作画 2: 入口文件 Main.ts,  类 Main 是程序的入口 // 1, 在一个宽高为 640 * 1136 的画布上作画 // 2, ...

  8. kubernetes组件架构

    kubernetes,简称K8s,是用8代替8个字符“ubernete”而成的缩写.是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器化的应用简单并且高效( ...

  9. MVC基于角色权限控制--权限过滤

    用户访问服务器实际上就是访问控制器下的方法,因此在权限控制就是控制器方法的访问权限 为了方便控制,我们可以建立一个基类控制器(BaseController),让需要的控制器继承这个控制器即可,在Bas ...

  10. Jsoup解析网页源码时常用的Element(s)类

    Jsoup解析网页源码时常用的Element(s)类 一.简介 该类是Node的直接子类,同样实现了可克隆接口.类声明:public class Element extends Node 它表示由一个 ...