当前标签 / Web前端 / 总共26篇

阿里开源游戏引擎 Hilo

2019-08-02 · 大约 1800 个字 · 预计 9 分钟读完

HelloWorld

Hilo 的库是模块化的，下载地址：https://github.com/hiloteam/Hilo/tree/dev/build

Hilo 除了提供一个独立无依赖的版本（Standalone）外，还提供AMD、CommonJS、CMD、CommonJS等多种模块范式的版本。开发者可以根据自己的习惯，下载Hilo的不同范式版本使用。

1
2
3
4
5
6
7
hilo/
└── build/
    ├── standalone/     #Standalone独立版本
    ├── amd/            #RequireJS(AMD) 版本
    ├── commonjs/       #CommonJS 版本
    ├── kissy/          #SeaJS(CMD) 版本
    └── cmd/            #Kissy 版本

我们暂不考虑其他范式版本，引入 hilo-standalone 独立版本。

1
<script type="text/javascript" src="hilo-standalone.js"></script>

最基础的 Hilo 必须包含舞台（Stage），定时器（Ticker），可是对象（View）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body onload="init();">
    <div id="game-container"></div>
    <script type="text/javascript">
        function init(){
            //初始化舞台
            var stage = new Hilo.Stage({
                renderType: 'canvas',
                container: 'game-container',
                width: 320,
                height: 480
            });

            //启动舞台定时器
            var ticker = new Hilo.Ticker(20);
            ticker.addTick(stage);
            ticker.start();

            //创建一个图片对象
            var bmp = new Hilo.Bitmap({
                image: 'fish.png',
                rect: [0, 0, 174, 126],
                x: 75,
                y: 50
            }).addTo(stage);
        }
    </script>
</body>

上面我们将一个长图（包含很多精灵的动作）显示第一帧，然后将舞台绑定到 game-container 中，实际上在里面创建了一个 canvas 对象。

HTML5 Canvas 技术探究

2019-08-02 · 大约 1300 个字 · 预计 7 分钟读完

Web前端 · Canvas

Web前端 · HTML5 · Canvas

概述

在前一篇《Canvas 基础图形3D框架 Zdog》中我们已经尝试了使用 Canvas 框架 Zdog 实现有趣的 3D 图形，而本篇我们来探究一下 Canvas 的使用和原理，还是先从这两个矩形开始吧。

Canvas绘制两个矩形

1
2
3
4
5
6
7
8
9
<canvas id="testcanvas" width="500" height="500"></canvas>
<script>
    var c = document.getElementById('testcanvas');
    var p = c.getContext("2d");
    p.fillStyle = "#FF0000";
    p.fillRect(0, 0, 300, 300);
    p.fillStyle = "rgba(0,0,255,0.5)";
    p.fillRect(200,200,500,500);
</script>

Canvas 基础图形3D框架 Zdog

2019-07-30 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · 框架

Web前端 · 框架 · Zdog · 3D · 图形图像 · Canvas

框架介绍

Zdog 是一个开源的基于 Canvas 和 SVG 的 3D 图形渲染引擎，官网地址：https://zzz.dog/

Zdog引擎示例

Canvas基础

Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

1
<canvas id="testcanvas" width="500" height="500" style="border:1px solid red"></canvas>

例如在上面的 200x200 画布内绘制两个矩形：

1
2
3
4
5
6
7
var c = document.getElementById('testcanvas');
var p = c.getContext("2d");

p.fillStyle="#FF0000";
p.fillRect(0, 0, 300, 300);
p.fillStyle="rgba(0,0,255,0.5)";
p.fillRect(200,200,500,500);

使用Canvas绘制两个矩形

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

CSS 背景混合模式

2019-07-30 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · 背景混合 · 混合模式

混合模式

现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式，喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解，我们先来普及一下什么是图像的混合模式。

要理解混合模式需要理解，图层、通道、RGB模式原理。

图层比较好理解，就是我们的图像通过一层一层的叠加，最终形成我们所看到的图像，换句话说就是拆解图像到不同图层进行编辑。通道一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。

颜色通道

上面显示的是 RGB 通道，每个通道的像素都代表这种种颜色从 0~255 之间的一个值，三个通道叠加就会形成这个图像，而 alpha 通道是一个虚拟通道，比如我们可以创建一个选区来生成一个 alpha 通道。

alpha 通道

RGB模式 RGB是光色三原色，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

目前的显示器大都是采用了 RGB 颜色标准，在显示器上，是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的，目前的电脑一般都能显示32位颜色，有一千万种以上的颜色。如下图所示，假设三个灯都不开就是 0x000000 (黑色)，只开红灯就是 0xff0000 (红色），三个灯都开就是 0xffffff (白色)， rgb 三个值为等值的时候如 0x666666 是灰值（没有色相），RGB 模式称之为加色模式（相加成白色）。

RGB模式叠加示意图

CSS 中的混合模式是通过 background-blend-mode 和 mix-blend-mode 实现的。

CSS 滤镜

2019-07-29 · 大约 200 个字 · 预计 1 分钟读完

Web前端 · CSS

Web前端 · CSS · 滤镜 · blur · 高斯模糊 · 亮度 · 对比度 · 灰度 · 饱和度 · 色调

CSS 滤镜是功能强大的新工具，它使浏览器能实现一些图像后期处理软件的功能。滤镜属性使浏览器可以实现像模糊、图像调整，甚至下拉阴影之类的效果。

滤镜的语法很简单：滤镜类型后面跟上滤镜 filter 属性，如模糊 blur，括号内加上它的值。

1
2
3
.filter {
    filter : blur(3px); 
}

高斯模糊 blur

CSS 多背景和渐变

2019-07-29 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · 背景 · 渐变 · background · linear · radial · gradient

设置多个背景

1
2
3
<body>
    <section></section>
</body>

1
2
3
4
5
section {
    width: 429px;
    height: 265px;
    background: url(image2.gif) no-repeat, url(image1.png);
}

上面给 section 设置了多个背景（用逗号隔开），默认第一个背景图片在最上面（image2.gif），类似的我们可以添加多个背景。

边框

CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素，这样在我们设置 100% 的窗口的时候就计算起来特别麻烦，后来引入了一个 border-box 来解决这个问题。

1
2
3
4
5
6
section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
}

1
2
3
4
5
6
7
section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
    box-sizing : border-box; 
}

CSS flexbox弹性布局

2019-07-26 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · flex · flexbox

初识flex

之前我们写布局都是基于浏览器的盒模型，通过浮动的方式来排列界面的，这种方式有很多浏览器的 bug 和困扰我们的问题，而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。

flexbox 是基于两个坐标轴来实现的，类似于 Android 中的线性布局 LinearLayout，如果我们要使一个容器成为 flexbox 就需要设置 display: flex;。

flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下：

基本使用

我们先来定义一个 flexbox 容器, 在里面放几个 flexitem：

1
2
3
4
5
6
7
<body>
    <div class="flexbox">
        <div class="flexitem">我是 DIV 标签内容</div>
        <p class="flexitem">我是 P 标签内容</p>
        <span class="flexitem">我是 SPAN 标签内容</p>
    </div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
}

.flexitem{
    background:brown;
    color:white;
}

CSS 媒体查询和响应式断点

2019-07-25 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · CSS

CSS媒体查询

在 CSS 中可以区分屏幕和打印机做不同的样式处理：

1
2
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">

上面代码表示 screen.css 只会在设备屏幕中起作用，而 print.css 样式表只会在打印机中起作用。

在 CSS3 中除了能区分屏幕和打印机外，还可以根据屏幕的尺寸等特征来区分。

媒体类型：

值	描述
all	用于所有设备
~~aural~~	~~已废弃。用于语音和声音合成器~~
~~braille~~	~~已废弃。应用于盲文触摸式反馈设备~~
~~embossed~~	~~已废弃。用于打印的盲人印刷设备~~
~~handheld~~	~~已废弃。用于掌上设备或更小的装置，如PDA和小型电话~~
print	用于打印机和打印预览
~~projection~~	~~已废弃。用于投影设备~~
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
~~tty~~	~~已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备~~
tv	~~已废弃。用于电视和网络电视~~

CSS3中的动画属性窥探

2019-07-24 · 大约 1000 个字 · 预计 5 分钟读完

Web前端 · CSS

Web前端 · CSS · CSS3

@keyframes 规则动画

box 从红色过度到黄色，间隔 5 秒。

1
2
3
<body>
    <div class="box"></div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.box{
    width:100px;
    height:100px;
    animation: myfirst 5s;
}
@keyframes myfirst {
    from {
        background: red;
    }

    to {
        background: yellow;
    }
}

Ajax在jQuery中的使用

2018-10-20 · 大约 400 个字 · 预计 2 分钟读完

JavaScript · Ajax

Web前端 · JavaScript · Ajax

Ajax全称为“Asynchronous JavaScript and XML” （异步JavaScript和XML）,它可以使浏览器不刷新而更新页面数据。Ajax的优势：

不需要插件支持。
优秀的用户体验。
提供Web程序的性能。
减轻服务器和宽带负担。

Ajax过程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            console.log(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            console.log(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

request.open('GET', '/api/categories');
request.send();

Web前端基础（21）HTML5的其他标签和补充

2018-10-18 · 大约 200 个字 · 预计 1 分钟读完

Web前端 · 基础

Web前端 · 基础 · HTML5

文本标记

p是最常用的文本标记之一，要在网页中表示段落就需要用p标签。

small和strong

small表示细则一类旁注，通常包括免责声明、注意事项、法律版本、版权信息等。small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。

1
2
3
4
5
6
7
<p>Order now to receive free shipping. <small>(Some restrictions may apply.)</small></p>

<p>...</p>

<footer>
	<p><small>&copy; 2013 The Super Store. All Rights Reserved.</small></p>
</footer>

strong表示内容的重要性，而em表示内容的着重点。根据内容需要，这两个元素可以单独使用，也可以一起使用。

1
2
    <p><strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>. They may <em>look</em>
        friendly, but that's just because they want to eat your arm.</p>

浏览器通常将strong文本以粗体显示，而将em文本以斜体显示，如果em是strong的子元素，将同时显示粗体和斜体。

注意：不用使用b元素代替strong，也不要使用i元素代替em。尽管他们在浏览器中显示的样式是一样的，但是含义却不一样。可以在strong中嵌套strong,em中嵌套em,来说明更加重要。

Web前端基础（20）HTML5基本结构

2018-10-17 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · 基础

Web前端 · 基础 · HTML5

基本HTML结构

每个HTML文档都应该包含一下几个组成部分：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> 是声明页面为HTML5文档，在HTML4和XHTML1.0时代，有好几种DOCTYPE，每一种都会指明HTML的版本，以及使用的是过度型还是严格型模式，太难记了，所以每次都需要复制黏贴进来，现在所有浏览器都理解这种简单的HTML5的DOCTYPE,所以可以忘记过去复杂繁琐的DOCTYPE了。

<html lang=“en”> 是声明了页面默认语言。