后来知道也可以透过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. Mapreduce入门和优化方案

    MapReduce基本原理和高性能网络下优化: Mapreduce概述 Mapreduce式谷歌开源的一项重要技术,是一个编程模型,用来进行大数据量的计算,对于大数据量的计算通常采用的处理方式式并行计 ...

  2. nginx安装环境

    1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...

  3. 第十届蓝桥杯JavaB组总结

    去年参加了第九届蓝桥杯C/C++B组,很捞,做了大概5道题,就好像就做对了2道结果填空题,编程题只做了一个(只通过了部分测试数据),最后拿了个省三,但是班上那些平时没有认真准备的都拿了省二 今年想好好 ...

  4. WPF c# 定时器

    //定时查询-定时器 DispatcherTimer dispatcherTimer = new DispatcherTimer(); dispatcherTimer.Tick += (s, e) = ...

  5. TCP/IP_网络基础知识

    今天看到k8s的网络,顿感网络知识不是特别扎实,立马回头补一下Tcp-ip知识,顺便记录下学习的过程: 计算机与网络发展的7个阶段: 批处理时代(计算机按照顺序处理,50年代)->分时系统时代( ...

  6. 五大排序算法（Python）

    冒泡排序 冒泡排序通常是在CS入门课程中教的,因为它清楚地演示了排序是如何工作的,同时又简单易懂.冒泡排序步骤遍历列表并比较相邻的元素对.如果元素顺序错误,则交换它们.重复遍历列表未排序部分的元素,直 ...

  7. js 数组的crud操作

    增加push(); 向数组尾添加元素unshift(); 向数组头添加元素向数组指定下标添加元素:可以用Array提供的splice(); var arr = ['a','b','c']; arr.s ...

  8. Shell流程控制（if,else,case,while,for,until）

    1.条件选择 1.1.if 语句 语法十分简单 #!/bin/bash MATH_SCORES="$1" NAME="$2" if [ -z "${M ...

  9. Python——列表深浅拷贝

    一.深浅拷贝 如果希望将列表复制一份,通过列表的内置方法copy就可以实现: s = [[1,2],3,4] s1 = s.copy() print(s) print(s1) 拷贝出的列表s1与原列表 ...

  10. 电子书 VS 纸质书

    电子书, 或者网络上的博客,技术文章(最好是 一系列的, 完整的). 比起纸质书来说, 优势在于: 1 根据左部的目录快速定位 到自己想看的章节.通过PgDn PgUp 等键盘功能快速翻页 2 方便的 ...