fix: 修复cdn错误和错别字

airingursb · Sep 26, 2018 · b44d5f5 · b44d5f5
1 parent 4c240ba
commit b44d5f5
Show file tree

Hide file tree

Showing 23 changed files with 90 additions and 90 deletions.
diff --git a/01.md b/01.md
@@ -11,7 +11,7 @@
 
 ## HTML5介绍
 
-HTML5是新一代的HTML(Hyper Text Markup Language)，即超文本标记语言，于去年10月28日正式发布，它是全新的、互联网上构建页面的标准语言。
+HTML5是新一代的HTML(Hyper Text Markup Language)，即超文本标记语言，于2014年10月28日正式发布，它是全新的、互联网上构建页面的标准语言。
 
 那么究竟什么是HTML5？在W3C HTML5的常见问题中，关于HTML5是这样说明的：*HTML5是一个开放的平台下开发的免费许可条款。*
 
@@ -21,11 +21,11 @@ HTML5是新一代的HTML(Hyper Text Markup Language)，即超文本标记语言
 
 ## Canvas的浏览器支持
 
-![主流浏览器](http://7xkcl8.com1.z0.glb.clouddn.com/edu1-2.jpg)
+![主流浏览器](http://airing.ursb.me/edu1-2.jpg)
 
 由于课程的主要内容是Canvas，以下我列出了最流行的Web浏览器以及它们开始支持Canvas元素的最小版本号。
 
-|Safari|Firefox|IE|Chrome|Opear|iOS Safari|Android Brower|
+|Safari|Firefox|IE|Chrome|Opera|iOS Safari|Android Brower|
 |:--:|:--:|:--:|:--:|:--:|:--:|:--:|
 |3.2|3.5|9|9|10.6|3.2|2.1|
 
@@ -52,7 +52,7 @@ Hello Airing!
 
 运行结果如下：
 
-![示例1-1](http://7xkcl8.com1.z0.glb.clouddn.com/edu1-1.png-html.jpg)
+![示例1-1](http://airing.ursb.me/edu1-1.png-html.jpg)
 
 HTML是由一个个形如尖括号`<>`的标签元素组成，这些标签**通常是成对出现，并且标签之间只能嵌套不能交叉**。
 

diff --git a/02.md b/02.md
@@ -51,7 +51,7 @@
 [演示 2-2](http://airingursb.github.io/canvas/Canvas/2/2-2.html)
 
 运行结果：
-![基础的Canvas页面](http://7xkcl8.com1.z0.glb.clouddn.com/edu2-1.png-html.jpg)
+![基础的Canvas页面](http://airing.ursb.me/edu2-1.png-html.jpg)
 
 对以上代码有几点说明：
 

diff --git a/03.md b/03.md
@@ -3,7 +3,7 @@
 ## 怎么画线段？
 上一讲我们已经得到了咱们的画布和画笔，在发挥艺术家之魂前，还是要像小孩牙牙学语一样，我们也得从画一条线段开始。因为画线段是最简单的，最基础的。但是别小看了它。下面是我从度娘那里找到的一个由线条组成的图像。
 
-![线条组成的图像](http://7xkcl8.com1.z0.glb.clouddn.com/edu3-1.jpg)
+![线条组成的图像](http://airing.ursb.me/edu3-1.jpg)
 
 是不是很有魔性？
 
@@ -17,7 +17,7 @@
 因为 **Canvas是基于状态的绘制**（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。
 
 ### 移动画笔(moveTo())
-之前我们获得了画笔 `context`，所以以此为例，给出改方法的使用实例——`context.moveTo(100,100)`。这句代码的意思是 **移动画笔至(100,100)这个点（单位是px）**。记住，这里是以 `canvas` 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。
+之前我们获得了画笔 `context`，所以以此为例，给出该方法的使用实例——`context.moveTo(100,100)`。这句代码的意思是 **移动画笔至(100,100)这个点（单位是px）**。记住，这里是以 `canvas` 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。
 
 ### 笔画停点(lineTo())
 同理，`context.lineTo(600,600)`。这句的意思是从 **上一笔的停止点** 绘制到(600,600)这里。不过要清楚，这里的`moveTo()``lineTo()`都只是状态而已，是规划，是我准备要画，还没有开始画，只是一个计划而已！
@@ -73,13 +73,13 @@
 
 运行结果：
 
-![第一个线条](http://7xkcl8.com1.z0.glb.clouddn.com/edu3-2.png-html.jpg)
+![第一个线条](http://airing.ursb.me/edu3-2.png-html.jpg)
 
 (一直有小伙伴问我页面右下角的熊是什么鬼？哦哦，之前忘解释了，那个是我的防伪水印！😄)
 
 我还标注了一个页面解析图，供大家参考。
 
-![标注图](http://7xkcl8.com1.z0.glb.clouddn.com/edu3-3.jpeg-html.jpg)
+![标注图](http://airing.ursb.me/edu3-3.jpeg-html.jpg)
 
 这里我将原本 `<canvas>` 标签中的 `width` 和 `height` 去掉了，但在JavaScript代码中设置了 `canvas` 对象的 `width` 和 `height` 的属性。
 

diff --git a/04.md b/04.md
@@ -43,7 +43,7 @@
 
 运行结果：
 
-![绘制折线](http://7xkcl8.com1.z0.glb.clouddn.com/edu4-1.png-html.jpg)
+![绘制折线](http://airing.ursb.me/edu4-1.png-html.jpg)
 
 ## 绘制多条折线
 
@@ -100,7 +100,7 @@
 
 运行结果：
 
-![绘制多条折线](http://7xkcl8.com1.z0.glb.clouddn.com/edu4-2.png-html.jpg)
+![绘制多条折线](http://airing.ursb.me/edu4-2.png-html.jpg)
 
 咦？是不是很奇怪？说好的先红色，再蓝色，再黑色呢？怎么全是黑色了？其实，这里的原因是我之前一直强调的一点——**Canvas是基于状态的绘制**。
 
@@ -166,7 +166,7 @@
 
 运行结果：
 
-![使用beginPath()绘制多条折线](http://7xkcl8.com1.z0.glb.clouddn.com/edu4-3.png-html.jpg)
+![使用beginPath()绘制多条折线](http://airing.ursb.me/edu4-3.png-html.jpg)
 
 可以看到，这里得到了我们预想的结果。因为使用了`beginPath()`，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线。`beginPath()`是绘制设置状态的起始点，它之后代码设置的绘制状态的作用域结束于绘制方法`stroke()`、`fill()`或者`closePath()`，至于`closePath()`之后会讲到。
 

diff --git a/05.md b/05.md
@@ -53,11 +53,11 @@
 
 运行结果：
 
-![绘制矩形](http://7xkcl8.com1.z0.glb.clouddn.com/edu5-1.png-html.jpg)
+![绘制矩形](http://airing.ursb.me/edu5-1.png-html.jpg)
 
 乍一看没啥问题，但是视力好的童鞋已经发现了，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了`lineWidth`导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽，这种缺口就越明显。那么这种情况该怎么避免呢？
 
-标题已经剧透了，使用clothPath()闭合图形。
+标题已经剧透了，使用closePath()闭合图形。
 
 ```HTML
 <!DOCTYPE html>
@@ -104,7 +104,7 @@
 
 运行结果：
 
-![使用closePath()闭合图形](http://7xkcl8.com1.z0.glb.clouddn.com/edu5-2.png-html.jpg)
+![使用closePath()闭合图形](http://airing.ursb.me/edu5-2.png-html.jpg)
 
 这个例子结合上节课的讲解，我们知道了绘制路径的时候需要将规划的路径使用`beginPath()`与`closePath()`包裹起来。当然，最后一笔可以不画出来，直接使用`closePath()`，它会自动帮你闭合的。(所以如果你不想绘制闭合图形就不可以使用`closePath()`)
 
@@ -161,7 +161,7 @@
 
 运行结果：
 
-![给矩形上色](http://7xkcl8.com1.z0.glb.clouddn.com/edu5-3.png-html.jpg)
+![给矩形上色](http://airing.ursb.me/edu5-3.png-html.jpg)
 
 这里需要注意的是一个良好的编码规范。因为之前说过了Canvas是基于状态的绘制，只有调用了`stroke()`和`fill()`才确定绘制。所以我们要把这两行代码放在最后，其余的状态设置的代码放在它们之前，将*状态设置*与*确定绘制*的代码分隔开。增强代码的可读性。
 
@@ -327,11 +327,11 @@ function add2(x,y)
 
 运行结果：
 
-![封装绘制矩形方法](http://7xkcl8.com1.z0.glb.clouddn.com/edu5-4.png-html.jpg)
+![封装绘制矩形方法](http://airing.ursb.me/edu5-4.png-html.jpg)
 
 ## 使用rect()方法绘制矩形
 
-犹豫绘制矩形是常用的方法，所以在Canvas API中已经帮我们封装好了一个绘制矩形的方法——`rect()`。这个方法接收4个参数x, y, width, height，实际调用时也就是
+由于绘制矩形是常用的方法，所以在Canvas API中已经帮我们封装好了一个绘制矩形的方法——`rect()`。这个方法接收4个参数x, y, width, height，实际调用时也就是
 ```JavaScript
 context.rect(x,y,width,height);
 ```
@@ -355,7 +355,7 @@ function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor)
 ## 调用封装方法，绘制魔性图像
 
 还记得我们第三节开头那个魔性的图像吗？
-![度娘魔性图](http://7xkcl8.com1.z0.glb.clouddn.com/edu3-1.jpg)
+![度娘魔性图](http://airing.ursb.me/edu3-1.jpg)
 
 好，我们就拿它开刀，练练手，给咱刚封装好的方法活动活动筋骨。
 
@@ -387,7 +387,7 @@ function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor)
         context.fill();
 
         context.beginPath();
-        for(var i=0; i<=20; i++){
+        for(var i=0; i<20; i++){
             drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 20 * i);
             drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 - 20 * i, 390 - 20 * i);
         }
@@ -431,7 +431,7 @@ function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor)
 
 运行结果：
 
-![魔性正方形](http://7xkcl8.com1.z0.glb.clouddn.com/edu5-5.png-html.jpg)
+![魔性正方形](http://airing.ursb.me/edu5-5.png-html.jpg)
 
 是不是很有魔性？是不是非常的酷？这段代码就不花篇幅解释了，大家自己课下琢磨琢磨，也可以尝试着用已经学过的知识去绘制一个酷酷的图像。这节课内容有点多，其实也只是介绍了四个属性和方法——`closePath()`、`fillStyle`、`fill()`、`rect()`，还有一个扩展的JavaScript函数讲解。
 

diff --git a/06.md b/06.md
@@ -96,7 +96,7 @@ strokeStyle 定义线和形状边框的颜色和样式。
 
 运行结果：
 
-![线条的帽子](http://7xkcl8.com1.z0.glb.clouddn.com/edu6-1.png-html.jpg)
+![线条的帽子](http://airing.ursb.me/edu6-1.png-html.jpg)
 
 这里我还做了两条平行线做一下参考，这样一眼就能看清`lineCap`三个值的特点。但要注意，这个帽子只在线条的端点处起作用，哪怕是折点很多的折线，也仅仅是在开始和终止的两个端点带帽子。如果想改变线条折点(两个线段的连接处)的样式，那就要用到下面的`lineJoin`属性。
 
@@ -161,7 +161,7 @@ strokeStyle 定义线和形状边框的颜色和样式。
 
 运行结果：
 
-![线条的连接](http://7xkcl8.com1.z0.glb.clouddn.com/edu6-2.png-html.jpg)
+![线条的连接](http://airing.ursb.me/edu6-2.png-html.jpg)
 
 看不清的童鞋自己放大网页或者自己将代码的线宽调宽一点。
 
@@ -229,11 +229,11 @@ strokeStyle 定义线和形状边框的颜色和样式。
 
 运行结果：
 
-![miterLimit](http://7xkcl8.com1.z0.glb.clouddn.com/edu6-3.png-html.jpg)
+![miterLimit](http://airing.ursb.me/edu6-3.png-html.jpg)
 
 会发现，这个`miterLimit`规定了一个自动填充连接点的极限值。如果超过了这个值，会导致`lineJoin`属性失效，会从 miter 变成 bevel。可以看出来，这个值和线宽以及夹角有关，具体是啥关系。看下图。
 
-![miterLimit](http://7xkcl8.com1.z0.glb.clouddn.com/edu6-4.png)
+![miterLimit](http://airing.ursb.me/edu6-4.png)
 
 可以看到，关系有点复杂。有兴趣的小伙伴可以推导一下这个值与线宽、夹角的函数关系。其实，大多时候用不到这个隐藏属性，即便用到了也是凭感觉写个数然后不满意再调试即可。
 
@@ -304,7 +304,7 @@ strokeStyle 定义线和形状边框的颜色和样式。
 
 运行结果：
 
-![高级线段绘制举例](http://7xkcl8.com1.z0.glb.clouddn.com/edu6-5.png-html.jpg)
+![高级线段绘制举例](http://airing.ursb.me/edu6-5.png-html.jpg)
 
 这 3 个线段和连接的实例有助于说明在画布上绘制线段时不同属性的组合。
 

diff --git a/07.md b/07.md
@@ -24,7 +24,7 @@ context.fillStyle = "red";
 |黑色|Black|#000000s|
 |绿色|Green|#008000|
 |银色|Silver|#C0C0C0|
-|石灰色|Lime|#00FF00|
+|绿黄色|Lime|#00FF00|
 |灰色|Gray|#808080|
 |橄榄色|Olive|#808000|
 |白色|White|#FFFFFF|
@@ -163,10 +163,10 @@ context.strokeStyle = grd;
 
 运行结果：
 
-![线性渐变](http://7xkcl8.com1.z0.glb.clouddn.com/edu7-1.png-html.jpg)
+![线性渐变](http://airing.ursb.me/edu7-1.png-html.jpg)
 
 我觉得有必要做一个图解，方便大家一次性理解渐变。
-![渐变线图解](http://7xkcl8.com1.z0.glb.clouddn.com/edu7-2.jpeg-html.jpg)
+![渐变线图解](http://airing.ursb.me/edu7-2.jpeg-html.jpg)
 
 为了方便理解，建议把渐变线看成是一个有向线段。如果熟悉PS等绘图工具，用过其中的渐变色设置，应该会很好理解。
 
@@ -178,7 +178,7 @@ context.strokeStyle = grd;
 
 #### 绘制矩形的快捷方法
 
-`fillRect(x,y,width,height)`、`stroke(x,y,width,height)`。这两个函数可以分别看做`rect()`与`fill()`以及`rect()`与`stroke()`的组合。因为`rect()`仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。
+`fillRect(x,y,width,height)`、`strokeRect(x,y,width,height)`。这两个函数可以分别看做`rect()`与`fill()`以及`rect()`与`stroke()`的组合。因为`rect()`仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。
 
 ```HTML
 <!DOCTYPE html>
@@ -235,7 +235,7 @@ context.strokeStyle = grd;
 
 运行结果：
 
-![复杂的线性渐变](http://7xkcl8.com1.z0.glb.clouddn.com/edu7-3.png-html.jpg)
+![复杂的线性渐变](http://airing.ursb.me/edu7-3.png-html.jpg)
 
 这两个页面都是水平渐变，但是要清楚线性渐变不一定是水平的，方向可以是任意的，通过渐变线的端点来设置方向。
 
@@ -292,7 +292,7 @@ context.strokeStyle = grd;
         grd.addColorStop(0.25,"maroon");
         grd.addColorStop(0.5,"aqua");
         grd.addColorStop(0.75,"fuchsia");
-        grd.addColorStop(0.25,"teal");
+        grd.addColorStop(1,"teal");
 
         //应用渐变
         context.fillStyle = grd;
@@ -310,7 +310,7 @@ context.strokeStyle = grd;
 
 运行结果：
 
-![径向渐变](http://7xkcl8.com1.z0.glb.clouddn.com/edu7-4.png-html.jpg)
+![径向渐变](http://airing.ursb.me/edu7-4.png-html.jpg)
 
 怎么感觉这个颜色搭配那么的……算了，这个就叫做艺术。
 

diff --git a/08.md b/08.md
@@ -42,7 +42,7 @@ context.fillStyle = pattern;
 
 我们直接看一段完整的程序，这里我要重复填充这个萌萌的长颈鹿作为纹理。需要注意的是，选择图片时一定要选择那种左右互通，上下互通的图片做为纹理，这样看上去才不会有不自然的短接处。
 
-![萌萌的长颈鹿](http://7xkcl8.com1.z0.glb.clouddn.com/edu8-1.jpg)
+![萌萌的长颈鹿](http://airing.ursb.me/edu8-1.jpg)
 
 安利一个网站。这张图取自[优美图网](http://topit.me)，这个网站非常赞，里面的图片非常漂亮而且种类繁多，最重要的是它是免费的！！！我从初中开始就一直使用这个网站来找素材。并且最近又推出了APP，有Android和iOS端，推荐大家下载使用。（这是个秘密，我一般不告诉别人的。）
 
@@ -87,7 +87,7 @@ context.fillStyle = pattern;
 
 运行结果：
 
-![很多个萌萌的长颈鹿](http://7xkcl8.com1.z0.glb.clouddn.com/edu8-2.png-html.jpg)
+![很多个萌萌的长颈鹿](http://airing.ursb.me/edu8-2.png-html.jpg)
 
 这里使用了`Image`的`onload`事件，它的作用是对图片进行预加载处理，即在图片加载完成后才立即除非其后function的代码体。这个是必须的，如果不写的话，画布将会显示黑屏。因为没有等待图片加载完成就填充纹理，导致浏览器找不到图片。
 

diff --git a/09.md b/09.md
@@ -50,7 +50,7 @@
 
 运行结果：
 
-![新的画布](http://7xkcl8.com1.z0.glb.clouddn.com/edu9-1.png-html.jpg)
+![新的画布](http://airing.ursb.me/edu9-1.png-html.jpg)
 
 之所以要绘制一个空白的矩形填满画布，是因为我们之前说过，canvas是透明的，如果不设置背景色，那么它就会被我设置的`<body>`纹理所覆盖，想要使其拥有背景色（白色），只有绘制矩形覆盖canvas这一个方法。
 
@@ -64,7 +64,7 @@
 
 前面三个参数，分别是圆心坐标与圆半径。**`startAngle`、`endAngle`使用的是弧度值，不是角度值。**弧度的规定是**绝对**的，如下图。
 
-![arc方法的标准](http://7xkcl8.com1.z0.glb.clouddn.com/edu9-2.png-normal.jpg)
+![arc方法的标准](http://airing.ursb.me/edu9-2.png-normal.jpg)
 
 `anticlockwise`表示绘制的方法，是顺时针还是逆时针绘制。它传入布尔值，true表示逆时针绘制，false表示顺时针绘制，缺省值为false。
 
@@ -78,7 +78,7 @@
 
 圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。
 
-![圆角矩形的组成](http://7xkcl8.com1.z0.glb.clouddn.com/edu9-3.png-normal.jpg)
+![圆角矩形的组成](http://airing.ursb.me/edu9-3.png-normal.jpg)
 
 因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。
 
@@ -134,7 +134,7 @@
 
 运行结果：
 
-![圆角矩形](http://7xkcl8.com1.z0.glb.clouddn.com/edu9-4.png-html.jpg)
+![圆角矩形](http://airing.ursb.me/edu9-4.png-html.jpg)
 
 建议大家自己动手绘制一个圆角矩形，这样有助于对路径的掌握。
 
@@ -208,7 +208,7 @@
 
 运行结果：
 
-![2048游戏界面](http://7xkcl8.com1.z0.glb.clouddn.com/edu9-5.png-html.jpg)
+![2048游戏界面](http://airing.ursb.me/edu9-5.png-html.jpg)
 
 这个圆角矩形的函数写好之后，可以自己封装进JS文件里，以后遇到什么好的函数都可以放进去，这样积累下来，这个文件就是一套属于自己的图形库和游戏引擎了，是不是非常的酷？
 

diff --git a/10.md b/10.md
@@ -71,11 +71,11 @@
 
 运行结果：
 
-![绘制弧线](http://7xkcl8.com1.z0.glb.clouddn.com/edu10-1.png-html.jpg)
+![绘制弧线](http://airing.ursb.me/edu10-1.png-html.jpg)
 
 这个案例也很好说明了`arcTo()`的各个关键点的作用。为了更清楚的解释，我再标注一个分析图。
 
-![arcTo()详解](http://7xkcl8.com1.z0.glb.clouddn.com/edu10-2.jpeg-normal.jpg)
+![arcTo()详解](http://airing.ursb.me/edu10-2.jpeg-normal.jpg)
 
 这里注意一下，`arcTo()`绘制的起点是(x0, y0)，但(x0, y0)不一定是圆弧的切点。真正的`arcTo()`函数只传入(x1, y1)和(x2, y2)。其中(x1, y1)称为控制点，(x2, y2)是圆弧终点的切点，它不一定在圆弧上。但(x0, y0)一定在圆弧上。
 
@@ -84,26 +84,26 @@
 * (x2, y2)不一定在弧线上：
 `drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);`
 
-![(x2, y2)不一定在弧线上](http://7xkcl8.com1.z0.glb.clouddn.com/edu10-3.jpeg-normal.jpg)
+![(x2, y2)不一定在弧线上](http://airing.ursb.me/edu10-3.jpeg-normal.jpg)
 
 * (x0, y0)一定在弧线上：
 `drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);`
 
-![(x0, y0)一定在弧线上](http://7xkcl8.com1.z0.glb.clouddn.com/edu10-4.png-normal.jpg)
+![(x0, y0)一定在弧线上](http://airing.ursb.me/edu10-4.png-normal.jpg)
 
 挺有意思的，它为了经过(x0, y0)直接将切点和(x0, y0)连接起来形成线段。好执着的弧线……
 
 ## 绘制微信对话框
 
 大家可以尝试着使用Canvas绘制一下微信聊天界面，作为练习与巩固。
 
-![微信对话框](http://7xkcl8.com1.z0.glb.clouddn.com/edu10-5.jpeg)
+![微信对话框](http://airing.ursb.me/edu10-5.jpeg)
 
 这里使用到了绘制矩形，绘制圆角矩形，绘制多线条图形，填充颜色的一些知识。还有一些 Canvas文本API 我们并没有说到，所以大家只要能绘制出一个大概的界面就算合格了。能够绘制出来，也就基本掌握了Canvas API。
 
 其实上述对话是生成出来的——“[微信界面生成器网页版](http://airingursb.github.io/ez/source)”，可谓是微商神器。是不是非常的酷？
 
-![微信生成器网页版](http://7xkcl8.com1.z0.glb.clouddn.com/edu10-6.jpeg-html.jpg)
+![微信生成器网页版](http://airing.ursb.me/edu10-6.jpeg-html.jpg)
 
 这只是暑假花两天时间写的最初版本，还尚未达到发布的地步，在我写本节的时候，这个网页的界面还正在优化中。大家可以尝试自己动手做做，也可以关注和参考我的这个小项目[github：微信界面生成器](http://github.io/airingursb/ez)。本节就不再重复给出界面代码了。