后来知道也可以透过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. memset函数详解

    语言中memset函数详解(2011-11-16 21:11:02)转载▼标签: 杂谈 分类: 工具相关  功 能: 将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的大 ...

  2. lucene query

    在lucene的搜索中,最重要的无疑就是对query的理解和掌握了.这里扒拉一下源码(版本3.5.0)的query和query实现: query是一个抽象类,实现类有以下几个: termQuery m ...

  3. js常见怪异

    1.隐式转换为布尔:"truthy"和"falsy" 当 JavaScript 需要一个布尔值时(例如:if 语句),任何值都可以被使用. 最终这些值将被转换为 ...

  4. JSON 格式化为易读格式的字符串

    算法 http://blog.csdn.net/yanghaitaohhh/article/details/39672783 使用算法如下: 对输入字符串,逐个字符的遍历 1.获取当前字符. 2.如果 ...

  5. 前端工作日常爬坑之——单页面微信开发Jssdk相关,以及jssdk图片直传自己服务器的实现。

    日常爬坑 遇到的情况大致说明: 项目基于Vue2全家桶实现,vue-router控制前端路由,路由模式是History(主要是领导追求太高,觉得hash带#号太丑,然后遇到了小坑...),主要是服务于 ...

  6. DedeCMS清空删除所有文档后新建文档信息ID从1开始

    方法一.登录织梦后台,找到系统->系统设置->SQL命令行工具 分别运行以下命令: 清除表中的数据,删除所有文章: truncate table `dede_arctiny`; trunc ...

  7. jQuery - 链(Chaining)

    http://www.runoob.com/jquery/jquery-chaining.html jQuery - 链(Chaining) 通过 jQuery,可以把动作/方法链接在一起. Chai ...

  8. Windows7下安装redmine-3.4.6

    Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具.Redmine建立在Ruby on Rails(一个用于开发数据库驱动的网络应用程序的完整框架,基于计算机软件语言Ruby,给程序开发 ...

  9. [Android - QPST] 高通刷机/QPST刷机

    参考网站: https://forum.xda-developers.com/zuk-z2-pro/how-to/howto-flash-stock-rom-t3435109 http://ask.l ...

  10. android用TextView实现跑马灯效果

    今天搞啦很久,其实很简单,就加几个属性就可以啦! 图如下 : 有的说要重写TextView方法,有的说要设置固定长度,但是我没重写也没有设置固定长度也弄出来啦!跑在2.3.3的手机上面.就是不知道其他 ...