Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: try to fix broken links #11

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: try to fix broken links #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions 01.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,18 @@ HTML5是新一代的HTML(Hyper Text Markup Language)，即超文本标记语言
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基础的HTML5页面</title>
<title>基础的HTML5页面</title>
</head>
<body>
Hello Airing!
</body>
Hello Airing!
</body>
</html>
```
[演示 1-1](http://airingursb.github.io/canvas/Canvas/1/1-1.html)

运行结果如下：

![示例1-1](http://airing.ursb.me/edu1-1.png-html.jpg)
![示例1-1](http://airing.ursb.me/edu1-1.png)

HTML是由一个个形如尖括号`<>`的标签元素组成，这些标签**通常是成对出现，并且标签之间只能嵌套不能交叉**。

Expand Down
8 changes: 4 additions & 4 deletions 02.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基础的HTML5页面</title>
<title>基础的HTML5页面</title>
</head>

<body>
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</body>
</body>

</html>
```
Expand Down Expand Up @@ -44,14 +44,14 @@
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
</body>
</body>

</html>
```
[演示 2-2](http://airingursb.github.io/canvas/Canvas/2/2-2.html)

运行结果：
![基础的Canvas页面](http://airing.ursb.me/edu2-1.png-html.jpg)
![基础的Canvas页面](http://airing.ursb.me/edu2-1.png)

对以上代码有几点说明：

Expand Down
4 changes: 2 additions & 2 deletions 03.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,13 @@

运行结果：

![第一个线条](http://airing.ursb.me/edu3-2.png-html.jpg)
![第一个线条](http://airing.ursb.me/edu3-2.png)

(一直有小伙伴问我页面右下角的熊是什么鬼？哦哦，之前忘解释了，那个是我的防伪水印！😄)

我还标注了一个页面解析图，供大家参考。

![标注图](http://airing.ursb.me/edu3-3.jpeg-html.jpg)
![标注图](http://airing.ursb.me/edu3-3.jpeg)

这里我将原本 `<canvas>` 标签中的 `width` 和 `height` 去掉了，但在JavaScript代码中设置了 `canvas` 对象的 `width` 和 `height` 的属性。

Expand Down
8 changes: 4 additions & 4 deletions 04.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@

运行结果：

![绘制折线](http://airing.ursb.me/edu4-1.png-html.jpg)
![绘制折线](http://airing.ursb.me/edu4-1.png)

## 绘制多条折线

Expand Down Expand Up @@ -96,11 +96,11 @@
</html>
```

[演示 4-2](http://airingursb.github.io/canvas/Canvas/4/4-2.hmtl)
[演示 4-2](http://airingursb.github.io/canvas/Canvas/4/4-2.html)

运行结果：

![绘制多条折线](http://airing.ursb.me/edu4-2.png-html.jpg)
![绘制多条折线](http://airing.ursb.me/edu4-2.png)

咦？是不是很奇怪？说好的先红色，再蓝色，再黑色呢？怎么全是黑色了？其实，这里的原因是我之前一直强调的一点——**Canvas是基于状态的绘制**。

Expand Down Expand Up @@ -166,7 +166,7 @@

运行结果：

![使用beginPath()绘制多条折线](http://airing.ursb.me/edu4-3.png-html.jpg)
![使用beginPath()绘制多条折线](http://airing.ursb.me/edu4-3.png)

可以看到，这里得到了我们预想的结果。因为使用了`beginPath()`，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线。`beginPath()`是绘制设置状态的起始点，或重置当前的路径，它之后代码设置的绘制状态的作用域结束于绘制方法`fill()`或者`closePath()`，至于`closePath()`之后会讲到。

Expand Down
14 changes: 7 additions & 7 deletions 05.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@

运行结果：

![绘制矩形](http://airing.ursb.me/edu5-1.png-html.jpg)
![绘制矩形](http://airing.ursb.me/edu5-1.png)

乍一看没啥问题，但是视力好的童鞋已经发现了，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了`lineWidth`导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽，这种缺口就越明显。那么这种情况该怎么避免呢？

Expand Down Expand Up @@ -93,7 +93,7 @@

运行结果：

![使用closePath()闭合图形](http://airing.ursb.me/edu5-2.png-html.jpg)
![使用closePath()闭合图形](http://airing.ursb.me/edu5-2.png)

这个例子结合上节课的讲解，我们知道了绘制路径的时候需要将规划的路径使用`beginPath()`与`closePath()`包裹起来。当然，最后一笔可以不画出来，直接使用`closePath()`，它会自动帮你闭合的。(所以如果你不想绘制闭合图形就不可以使用`closePath()`)

Expand Down Expand Up @@ -148,7 +148,7 @@

运行结果：

![给矩形上色](http://airing.ursb.me/edu5-3.png-html.jpg)
![给矩形上色](http://airing.ursb.me/edu5-3.png)

这里需要注意的是一个良好的编码规范。因为之前说过了Canvas是基于状态的绘制，只有调用了`stroke()`和`fill()`才确定绘制。所以我们要把这两行代码放在最后，其余的状态设置的代码放在它们之前，将*状态设置*与*确定绘制*的代码分隔开。增强代码的可读性。

Expand All @@ -166,12 +166,12 @@ JavaScript 和 ActionScript 语言的函数声明调用一样，都是编程语

函数的作用，可以写一次代码，然后反复地重用这个代码。如:我们要完成多组数和的功能。
```JavaScript
var sum;
var sum;
sum = 3+2;
alert(sum);

sum=7+8 ;
alert(sum);
alert(sum);

.... //不停重复两行代码
```
Expand Down Expand Up @@ -312,7 +312,7 @@ function add2(x,y)

运行结果：

![封装绘制矩形方法](http://airing.ursb.me/edu5-4.png-html.jpg)
![封装绘制矩形方法](http://airing.ursb.me/edu5-4.png)

## 使用rect()方法绘制矩形

Expand Down Expand Up @@ -414,7 +414,7 @@ function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor)

运行结果：

![魔性正方形](http://airing.ursb.me/edu5-5.png-html.jpg)
![魔性正方形](http://airing.ursb.me/edu5-5.png)

是不是很有魔性？是不是非常的酷？这段代码就不花篇幅解释了，大家自己课下琢磨琢磨，也可以尝试着用已经学过的知识去绘制一个酷酷的图像。这节课内容有点多，其实也只是介绍了四个属性和方法——`closePath()`、`fillStyle`、`fill()`、`rect()`，还有一个扩展的JavaScript函数讲解。

Expand Down
8 changes: 4 additions & 4 deletions 06.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ strokeStyle 定义线和形状边框的颜色和样式。

运行结果：

![线条的帽子](http://airing.ursb.me/edu6-1.png-html.jpg)
![线条的帽子](http://airing.ursb.me/edu6-1.png)

这里我还做了两条平行线做一下参考，这样一眼就能看清`lineCap`三个值的特点。但要注意，这个帽子只在线条的端点处起作用，哪怕是折点很多的折线，也仅仅是在开始和终止的两个端点带帽子。如果想改变线条折点(两个线段的连接处)的样式，那就要用到下面的`lineJoin`属性。

Expand Down Expand Up @@ -161,7 +161,7 @@ strokeStyle 定义线和形状边框的颜色和样式。

运行结果：

![线条的连接](http://airing.ursb.me/edu6-2.png-html.jpg)
![线条的连接](http://airing.ursb.me/edu6-2.png)

看不清的童鞋自己放大网页或者自己将代码的线宽调宽一点。

Expand Down Expand Up @@ -229,7 +229,7 @@ strokeStyle 定义线和形状边框的颜色和样式。

运行结果：

![miterLimit](http://airing.ursb.me/edu6-3.png-html.jpg)
![miterLimit](http://airing.ursb.me/edu6-3.png)

会发现，这个`miterLimit`规定了一个自动填充连接点的极限值。如果超过了这个值，会导致`lineJoin`属性失效，会从 miter 变成 bevel。可以看出来，这个值和线宽以及夹角有关，具体是啥关系。看下图。

Expand Down Expand Up @@ -304,7 +304,7 @@ strokeStyle 定义线和形状边框的颜色和样式。

运行结果：

![高级线段绘制举例](http://airing.ursb.me/edu6-5.png-html.jpg)
![高级线段绘制举例](http://airing.ursb.me/edu6-5.png)

这 3 个线段和连接的实例有助于说明在画布上绘制线段时不同属性的组合。

Expand Down
8 changes: 4 additions & 4 deletions 07.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,10 +163,10 @@ context.strokeStyle = grd;

运行结果：

![线性渐变](http://airing.ursb.me/edu7-1.png-html.jpg)
![线性渐变](http://airing.ursb.me/edu7-1.png)

我觉得有必要做一个图解，方便大家一次性理解渐变。
![渐变线图解](http://airing.ursb.me/edu7-2.jpeg-html.jpg)
![渐变线图解](http://airing.ursb.me/edu7-2.jpeg)

为了方便理解，建议把渐变线看成是一个有向线段。如果熟悉PS等绘图工具，用过其中的渐变色设置，应该会很好理解。

Expand Down Expand Up @@ -235,7 +235,7 @@ context.strokeStyle = grd;

运行结果：

![复杂的线性渐变](http://airing.ursb.me/edu7-3.png-html.jpg)
![复杂的线性渐变](http://airing.ursb.me/edu7-3.png)

这两个页面都是水平渐变，但是要清楚线性渐变不一定是水平的，方向可以是任意的，通过渐变线的端点来设置方向。

Expand Down Expand Up @@ -310,7 +310,7 @@ context.strokeStyle = grd;

运行结果：

![径向渐变](http://airing.ursb.me/edu7-4.png-html.jpg)
![径向渐变](http://airing.ursb.me/edu7-4.png)

怎么感觉这个颜色搭配那么的……算了，这个就叫做艺术。

Expand Down
2 changes: 1 addition & 1 deletion 08.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ context.fillStyle = pattern;

运行结果：

![很多个萌萌的长颈鹿](http://airing.ursb.me/edu8-2.png-html.jpg)
![很多个萌萌的长颈鹿](http://airing.ursb.me/edu8-2.png)

这里使用了`Image`的`onload`事件，它的作用是对图片进行预加载处理，即在图片加载完成后才立即除非其后function的代码体。这个是必须的，如果不写的话，画布将会显示黑屏。因为没有等待图片加载完成就填充纹理，导致浏览器找不到图片。

Expand Down
12 changes: 6 additions & 6 deletions 09.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

运行结果：

![新的画布](http://airing.ursb.me/edu9-1.png-html.jpg)
![新的画布](http://airing.ursb.me/edu9-1.png)

之所以要绘制一个空白的矩形填满画布，是因为我们之前说过，canvas是透明的，如果不设置背景色，那么它就会被我设置的`<body>`纹理所覆盖，想要使其拥有背景色（白色），只有绘制矩形覆盖canvas这一个方法。

Expand All @@ -64,7 +64,7 @@

前面三个参数，分别是圆心坐标与圆半径。**`startAngle`、`endAngle`使用的是弧度值，不是角度值。**弧度的规定是**绝对**的，如下图。

![arc方法的标准](http://airing.ursb.me/edu9-2.png-normal.jpg)
![arc方法的标准](http://airing.ursb.me/edu9-2.png)

`anticlockwise`表示绘制的方法，是顺时针还是逆时针绘制。它传入布尔值，true表示逆时针绘制，false表示顺时针绘制，缺省值为false。

Expand All @@ -78,7 +78,7 @@

圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。

![圆角矩形的组成](http://airing.ursb.me/edu9-3.png-normal.jpg)
![圆角矩形的组成](http://airing.ursb.me/edu9-3.png)

因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。

Expand Down Expand Up @@ -129,12 +129,12 @@
</body>
</html>
```

[演示 9-2](http://airingursb.github.io/canvas/Canvas/9/9-2.html)

运行结果：

![圆角矩形](http://airing.ursb.me/edu9-4.png-html.jpg)
![圆角矩形](http://airing.ursb.me/edu9-4.png)

建议大家自己动手绘制一个圆角矩形，这样有助于对路径的掌握。

Expand Down Expand Up @@ -208,7 +208,7 @@

运行结果：

![2048游戏界面](http://airing.ursb.me/edu9-5.png-html.jpg)
![2048游戏界面](http://airing.ursb.me/edu9-5.png)

这个圆角矩形的函数写好之后，可以自己封装进JS文件里，以后遇到什么好的函数都可以放进去，这样积累下来，这个文件就是一套属于自己的图形库和游戏引擎了，是不是非常的酷？

Expand Down
10 changes: 5 additions & 5 deletions 10.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,11 @@

运行结果：

![绘制弧线](http://airing.ursb.me/edu10-1.png-html.jpg)
![绘制弧线](http://airing.ursb.me/edu10-1.png)

这个案例也很好说明了`arcTo()`的各个关键点的作用。为了更清楚的解释，我再标注一个分析图。

![arcTo()详解](http://airing.ursb.me/edu10-2.jpeg-normal.jpg)
![arcTo()详解](http://airing.ursb.me/edu10-2.jpeg)

这里注意一下，`arcTo()`绘制的起点是(x0, y0)，但(x0, y0)不一定是圆弧的切点。真正的`arcTo()`函数只传入(x1, y1)和(x2, y2)。其中(x1, y1)称为控制点，(x2, y2)是圆弧终点的切点，它不一定在圆弧上。但(x0, y0)一定在圆弧上。

Expand All @@ -84,12 +84,12 @@
* (x2, y2)不一定在弧线上：
`drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);`

![(x2, y2)不一定在弧线上](http://airing.ursb.me/edu10-3.jpeg-normal.jpg)
![(x2, y2)不一定在弧线上](http://airing.ursb.me/edu10-3.jpeg)

* (x0, y0)一定在弧线上：
`drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);`

![(x0, y0)一定在弧线上](http://airing.ursb.me/edu10-4.png-normal.jpg)
![(x0, y0)一定在弧线上](http://airing.ursb.me/edu10-4.png)

挺有意思的，它为了经过(x0, y0)直接将切点和(x0, y0)连接起来形成线段。好执着的弧线……

Expand All @@ -103,7 +103,7 @@

其实上述对话是生成出来的——“[微信界面生成器网页版](http://airingursb.github.io/ez/source)”，可谓是微商神器。是不是非常的酷？

![微信生成器网页版](http://airing.ursb.me/edu10-6.jpeg-html.jpg)
![微信生成器网页版](http://airing.ursb.me/edu10-6.jpeg)

这只是暑假花两天时间写的最初版本，还尚未达到发布的地步，在我写本节的时候，这个网页的界面还正在优化中。大家可以尝试自己动手做做，也可以关注和参考我的这个小项目[github：微信界面生成器](http://github.io/airingursb/ez)。本节就不再重复给出界面代码了。

Expand Down
4 changes: 2 additions & 2 deletions 11.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ context.quadraticCurveTo(cpx,cpy,x,y);

这里我提供一个很不错的[在线转换器](http://tinyurl.com/html5quadratic)，界面如下。

![二次贝塞尔曲线在线转换器](http://airing.ursb.me/edu11-4.png-html.jpg)
![二次贝塞尔曲线在线转换器](http://airing.ursb.me/edu11-4.png)

这里我把三个控制点调好，变成一个大山的形状，右侧自动生成了代码，我们只要复制就行了。

Expand Down Expand Up @@ -78,7 +78,7 @@ context.quadraticCurveTo(cpx,cpy,x,y);

运行结果：

![二次贝塞尔曲线](http://airing.ursb.me/edu11-5.png-html.jpg)
![二次贝塞尔曲线](http://airing.ursb.me/edu11-5.png)

这样我们把在线转换工具里的贝塞尔曲线搬进我们自己的画布里了，是不是非常的酷？大家如果有特别难的曲线没法用`arcTo()`绘制，就可以尝试一下使用这个工具绘制贝塞尔曲线。

Expand Down
4 changes: 2 additions & 2 deletions 12.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

这个方法也是不用大家去掌握参数具体是怎么填的，只要知道参数的意义就行。和`quadraticCurveTo()`方法一样，`bezierCurveTo()`的三次贝塞尔曲线网上也能找到互动的网页工具。这里提供一个网页：[Canvas Bézier Curve Example](http://tinyurl.com/html5bezier)，大家可以动手试一下。

![三次贝塞尔曲线交互工具](http://airing.ursb.me/edu12-1.png-html.jpg)
![三次贝塞尔曲线交互工具](http://airing.ursb.me/edu12-1.png)

## 绘制XP壁纸

Expand Down Expand Up @@ -143,7 +143,7 @@ context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

运行结果：

![仿XP壁纸](http://airing.ursb.me/edu12-2.png-html.jpg)
![仿XP壁纸](http://airing.ursb.me/edu12-2.png)

是不是很萌？是不是非常的酷！这个案例几乎用到了之前所传授给你们的所有武功——三次贝塞尔曲线，径向渐变，线性渐变，绘制圆弧等等。分开写了三个函数，一个绘制草原、一个绘制蓝天、一个绘制白云……大家尝试自己实现一下，当做一次阶段性复习~

Expand Down
8 changes: 4 additions & 4 deletions 13.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@

运行结果：

![平移变换](http://airing.ursb.me/edu13-1.png-html.jpg)
![平移变换](http://airing.ursb.me/edu13-1.png)

这里的蓝色矩形，是矩形原来的位置，然后调用`translate()`方法，将矩形位移至（200，200），即红色矩形的位置。我们来用一张图看看，它是怎么做到平移变换的。

![解析平移变换](http://airing.ursb.me/edu13-2.jpeg-html.jpg)
![解析平移变换](http://airing.ursb.me/edu13-2.jpeg)

没错，其实这里的平移变换实质就是在平移坐标系，而对`translate()`传入的参数，实质就是新坐标系相对于旧坐标系的原点。这使得我们依旧是在（100，100）绘制的红色矩形，在平移坐标系之后，变到了（200，200）处。

Expand Down Expand Up @@ -120,7 +120,7 @@

运行结果：

![图形变换的坑](http://airing.ursb.me/edu13-3.png-html.jpg)
![图形变换的坑](http://airing.ursb.me/edu13-3.png)

这里的绿色矩形并没有如我们所愿在（300，300）位置处，而是跑到了（400，400）这里。为什么呢？想必大家已经知道了答案——Canvas是基于状态的绘制。在我们第一次平移之后，坐标系已经在（100，100）处了，所以如果继续平移，这个再基于新坐标系继续平移坐标系。那么要怎么去解决呢？很简单，有两个方法。

Expand Down Expand Up @@ -186,7 +186,7 @@

运行结果：

![状态保存结合图形变换](http://airing.ursb.me/edu13-4.png-html.jpg)
![状态保存结合图形变换](http://airing.ursb.me/edu13-4.png)

因此，**在使用图形变换的时候，要记得结合使用状态保存**。

Expand Down
Loading