概述
当前 WordPress
等许多开源网站大部分的主题都在使用 Google
的在线字体方案 —— Google Fonts
,Google 服务在大陆的崩溃情况使得大量的独立网站字体无法加载,大大影响到了国内相关网站的网页响应速度,现将解决方案总结如下:
解决方案一:本地加载字体包(推荐)
- 在 CSS 中找到被导入的 Google Fonts
|
|
本文是基于阮一峰的《ECMAScript 6 入门》做的个人学习笔记,方便今后查阅,所以以下内容基本上绝大部分出自阮一峰的博客。
简单说,ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现。
ES6 新增了 let
命令,用了声明变量,使用它声明的变量只在所在的代码块中有效。
|
|
for
循环的计数器就很合适使用 let
命令。
|
|
而且 let 不存在变量提升(变量可以在声明之前使用),也就是说我们一般需要先使用 let 来声明变量才能使用。
|
|
这是阅读《JavaScript 高级程序设计》书籍的学习笔记,整理和归纳,方便自己今后复习和查阅,这里总结的基本上都是一些比较特殊的知识点,和 Java 等其他高级语言重复的地方不在归纳范围内。建议先阅读第一部分 非面向对象部分。此部分主要是理解 JavaScript 中的面向对象的实现思路以及如何实现继承。
ECMAScript 中有两种属性:数据属性和访问器属性。
数据属性有 4 个描述其行为的特征。
[[Configurable]]
:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true.
[[Enumerable]]
:表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true.
[[Writable]]
:表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true.
[[Value]]
:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为 undefined.
|
|
这是阅读 《JavaScript 高级程序设计》 书籍的学习笔记,整理和归纳,方便自己今后复习和查阅,这里总结的基本上都是一些比较特殊的知识点,和 Java
等其他 高级语言 重复的地方不在归纳范围内。第一部分是基础部分(即非面向对象部分),基本上是围绕变量和函数展开的。
ECMAScript
中的语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾,如下例所示:
|
|
推荐使用封号
ECMAScript
的变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据。换句话说,每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用 var
操作符(注意var是一个关键字),后跟变量名(即一个标识符),如下所示:
|
|
此时变量 message
会保存一个特殊的值 undefined
, 定义变量的时候可以赋予初始值:
|
|
虽然支持松散类型,但是不推荐给变量设置不同类型的值
webpack 是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含 less / sass)、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了,其他都是细枝末节了。
前提,你的电脑需要安装 node 和 npm.
使用 npm install webpack
安装 webpack.
我们创建两个 js 文件:
src/bar.js
|
|
src/index.js
|
|
Hilo 的库是模块化的,下载地址:https://github.com/hiloteam/Hilo/tree/dev/build
Hilo 除了提供一个独立无依赖的版本(Standalone)外,还提供AMD、CommonJS、CMD、CommonJS等多种模块范式的版本。开发者可以根据自己的习惯,下载Hilo的不同范式版本使用。
|
|
我们暂不考虑其他范式版本,引入 hilo-standalone
独立版本。
|
|
最基础的 Hilo 必须包含舞台(Stage), 定时器(Ticker),可是对象(View):
|
|
上面我们将一个长图(包含很多精灵的动作)显示第一帧,然后将舞台绑定到 game-container 中, 实际上在里面创建了一个 canvas 对象。
在前一篇 《Canvas 基础图形3D框架 Zdog》 中我们已经尝试了使用 Canvas 框架 Zdog 实现有趣的 3D 图形,而本篇我们来探究一下 Canvas 的使用和原理,还是先从这两个矩形开始吧。
|
|
Zdog 是一个开源的基于 Canvas 和 SVG 的 3D 图形渲染引擎,官网地址:https://zzz.dog/
Canvas就像一块画布,我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
|
|
例如在上面的 200x200 画布内绘制两个矩形:
|
|
getContext("2d")
对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式,喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解,我们先来普及一下什么是图像的混合模式。
要理解混合模式需要理解,图层、通道、RGB模式原理。
图层 比较好理解,就是我们的图像通过一层一层的叠加,最终形成我们所看到的图像,换句话说就是拆解图像到不同图层进行编辑。 通道 一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。
上面显示的是 RGB 通道, 每个通道的像素都代表这种种颜色从 0~255 之间的一个值,三个通道叠加就会形成这个图像,而 alpha 通道是一个虚拟通道,比如我们可以创建一个选区来生成一个 alpha 通道。
RGB模式 RGB是光色三原色,通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
目前的显示器大都是采用了 RGB 颜色标准,在显示器上,是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的,目前的电脑一般都能显示32位颜色,有一千万种以上的颜色。如下图所示,假设三个灯都不开就是 0x000000 (黑色),只开红灯就是 0xff0000 (红色),三个灯都开就是 0xffffff (白色), rgb 三个值为等值的时候如 0x666666 是灰值(没有色相),RGB 模式称之为加色模式(相加成白色)。
CSS 中的混合模式是通过 background-blend-mode
和 mix-blend-mode
实现的。
|
|
|
|
上面给 section 设置了多个背景(用逗号隔开),默认第一个背景图片在最上面(image2.gif),类似的我们可以添加多个背景。
CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素, 这样在我们设置 100% 的窗口的时候就计算起来特别麻烦,后来引入了一个 border-box
来解决这个问题。
|
|
|
|
之前我们写布局都是基于浏览器的盒模型,通过浮动的方式来排列界面的,这种方式有很多浏览器的 bug 和困扰我们的问题, 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。
flexbox 是基于两个坐标轴来实现的, 类似于 Android 中的线性布局 LinearLayout, 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;
。
flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下:
我们先来定义一个 flexbox 容器, 在里面放几个 flexitem:
|
|
|
|