diff --git a/01.md b/01.md index 60171b9..98f71fd 100644 --- 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 index 81c3cd1..18f35fd 100644 --- 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 index dbf34f1..79bf2be 100644 --- 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) 这里我将原本 `` 标签中的 `width` 和 `height` 去掉了，但在JavaScript代码中设置了 `canvas` 对象的 `width` 和 `height` 的属性。 diff --git a/04.md b/04.md index 3b22c68..81b44d2 100644 --- 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 index ab2f587..6fe2de7 100644 --- 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 @@ -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 index 8281478..73acc44 100644 --- 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 index dadba9d..10f0896 100644 --- 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 @@ -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 index 3b17641..45b4c93 100644 --- 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 index cbf9383..7c2be7b 100644 --- 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是透明的，如果不设置背景色，那么它就会被我设置的``纹理所覆盖，想要使其拥有背景色（白色），只有绘制矩形覆盖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 index f08f36c..61eb53b 100644 --- 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,12 +84,12 @@ * (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)连接起来形成线段。好执着的弧线…… @@ -97,13 +97,13 @@ 大家可以尝试着使用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)。本节就不再重复给出界面代码了。 diff --git a/11.md b/11.md index 668653c..82420ef 100644 --- a/11.md +++ b/11.md @@ -6,7 +6,7 @@ Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲 这里我们不介绍计算公式，只要知道**贝塞尔曲线是一条由起始点、终止点和控制点所确定的曲线**就行了。而**n阶贝塞尔曲线就有n-1个控制点**。用过Photoshop等绘图软件的同学应该比较熟悉，因为其中的钢笔工具设置锚点绘制路径的时候，用到的就是贝塞尔曲线。下图就是五阶贝塞尔曲线的绘制过程。 -![五阶贝塞尔曲线](http://7xkcl8.com1.z0.glb.clouddn.com/edu11-1.gif) +![五阶贝塞尔曲线](http://airing.ursb.me/edu11-1.gif) 是不是非常的酷炫？ @@ -14,7 +14,7 @@ Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲 都介绍了五次贝塞尔曲线，那二次的肯定不在话下了。大家一定能想象出它长啥样。没错，就是下面这样。 -![二次贝塞尔曲线](http://7xkcl8.com1.z0.glb.clouddn.com/edu11-2.gif) +![二次贝塞尔曲线](http://airing.ursb.me/edu11-2.gif) 在Canvas里，二次贝塞尔曲线的方法如下。 @@ -24,13 +24,13 @@ context.quadraticCurveTo(cpx,cpy,x,y); 这里和`acrTo()`有异曲同工之妙。P0是起始点，所以通常搭配`moveTo()`或`lineTo()`使用。P1(cpx, cpy)是控制点，P2(x, y)是终止点，它们不是相切的关系。什么关系呢？如果偏要问，我只好给出下面的公式…… -![贝塞尔曲线一般函数式](http://7xkcl8.com1.z0.glb.clouddn.com/edu11-3.jpg) +![贝塞尔曲线一般函数式](http://airing.ursb.me/edu11-3.jpg) 这么复杂的函数式，那我们绘图时，`quadraticCurveTo(cpx,cpy,x,y)`的参数怎么填？很简单，可以简单调试直至得到你想要的效果。或者使用一些工具。 这里我提供一个很不错的[在线转换器](http://tinyurl.com/html5quadratic)，界面如下。 -![二次贝塞尔曲线在线转换器](http://7xkcl8.com1.z0.glb.clouddn.com/edu11-4.png-html.jpg) +![二次贝塞尔曲线在线转换器](http://airing.ursb.me/edu11-4.png-html.jpg) 这里我把三个控制点调好，变成一个大山的形状，右侧自动生成了代码，我们只要复制就行了。 @@ -78,7 +78,7 @@ context.quadraticCurveTo(cpx,cpy,x,y); 运行结果： -![二次贝塞尔曲线](http://7xkcl8.com1.z0.glb.clouddn.com/edu11-5.png-html.jpg) +![二次贝塞尔曲线](http://airing.ursb.me/edu11-5.png-html.jpg) 这样我们把在线转换工具里的贝塞尔曲线搬进我们自己的画布里了，是不是非常的酷？大家如果有特别难的曲线没法用`arcTo()`绘制，就可以尝试一下使用这个工具绘制贝塞尔曲线。 diff --git a/12.md b/12.md index 8333c22..7903733 100644 --- a/12.md +++ b/12.md @@ -12,7 +12,7 @@ context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 这个方法也是不用大家去掌握参数具体是怎么填的，只要知道参数的意义就行。和`quadraticCurveTo()`方法一样，`bezierCurveTo()`的三次贝塞尔曲线网上也能找到互动的网页工具。这里提供一个网页：[Canvas Bézier Curve Example](http://tinyurl.com/html5bezier)，大家可以动手试一下。 -![三次贝塞尔曲线交互工具](http://7xkcl8.com1.z0.glb.clouddn.com/edu12-1.png-html.jpg) +![三次贝塞尔曲线交互工具](http://airing.ursb.me/edu12-1.png-html.jpg) ## 绘制XP壁纸 @@ -143,7 +143,7 @@ context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 运行结果： -![仿XP壁纸](http://7xkcl8.com1.z0.glb.clouddn.com/edu12-2.png-html.jpg) +![仿XP壁纸](http://airing.ursb.me/edu12-2.png-html.jpg) 是不是很萌？是不是非常的酷！这个案例几乎用到了之前所传授给你们的所有武功——三次贝塞尔曲线，径向渐变，线性渐变，绘制圆弧等等。分开写了三个函数，一个绘制草原、一个绘制蓝天、一个绘制白云……大家尝试自己实现一下，当做一次阶段性复习~ diff --git a/13.md b/13.md index f8c4b8b..1cad0e9 100644 --- a/13.md +++ b/13.md @@ -59,11 +59,11 @@ 运行结果： -![平移变换](http://7xkcl8.com1.z0.glb.clouddn.com/edu13-1.png-html.jpg) +![平移变换](http://airing.ursb.me/edu13-1.png-html.jpg) 这里的蓝色矩形，是矩形原来的位置，然后调用`translate()`方法，将矩形位移至（200，200），即红色矩形的位置。我们来用一张图看看，它是怎么做到平移变换的。 -![解析平移变换](http://7xkcl8.com1.z0.glb.clouddn.com/edu13-2.jpeg-html.jpg) +![解析平移变换](http://airing.ursb.me/edu13-2.jpeg-html.jpg) 没错，其实这里的平移变换实质就是在平移坐标系，而对`translate()`传入的参数，实质就是新坐标系相对于旧坐标系的原点。这使得我们依旧是在（100，100）绘制的红色矩形，在平移坐标系之后，变到了（200，200）处。 @@ -118,7 +118,7 @@ 运行结果： -![图形变换的坑](http://7xkcl8.com1.z0.glb.clouddn.com/edu13-3.png-html.jpg) +![图形变换的坑](http://airing.ursb.me/edu13-3.png-html.jpg) 这里的绿色矩形并没有如我们所愿在（300，300）位置处，而是跑到了（400，400）这里。为什么呢？想必大家已经知道了答案——Canvas是基于状态的绘制。在我们第一次平移之后，坐标系已经在（100，100）处了，所以如果继续平移，这个再基于新坐标系继续平移坐标系。那么要怎么去解决呢？很简单，有两个方法。 @@ -184,7 +184,7 @@ 运行结果： -![状态保存结合图形变换](http://7xkcl8.com1.z0.glb.clouddn.com/edu13-4.png-html.jpg) +![状态保存结合图形变换](http://airing.ursb.me/edu13-4.png-html.jpg) 因此，**在使用图形变换的时候，要记得结合使用状态保存**。 diff --git a/14.md b/14.md index d80a4f3..b7dd494 100644 --- a/14.md +++ b/14.md @@ -59,13 +59,13 @@ 运行结果： -![旋转变换](http://7xkcl8.com1.z0.glb.clouddn.com/edu14-1.png-html.jpg) +![旋转变换](http://airing.ursb.me/edu14-1.png-html.jpg) 这里用for循环绘制了14对正方形，其中蓝色是旋转前的正方形，红色是旋转后的正方形。每次旋转都以正方形左上角顶点为原点进行旋转。每次绘制都被`save()`与`restore()`包裹起来，每次旋转前都移动了坐标系。童鞋们可以自己动动手，实践一下，就能体会到旋转变换的奥妙了。 ## 绘制魔性Logo -![魔性Logo](http://7xkcl8.com1.z0.glb.clouddn.com/edu14-2.jpg-normal.jpg) +![魔性Logo](http://airing.ursb.me/edu14-2.jpg-normal.jpg) 这是在度娘上看到了一个logo，巧妙运用了旋转变换，用一个很简单矩形，通过旋转变换，变成了一个很漂亮的logo。这logo是不是很有魔性？童鞋们动动脑，尝试实现一下它。下面，提供我实现它的代码。 @@ -114,7 +114,7 @@ 运行结果： -![魔性Logo](http://7xkcl8.com1.z0.glb.clouddn.com/edu14-3.png-html.jpg) +![魔性Logo](http://airing.ursb.me/edu14-3.png-html.jpg) 是不是非常的酷？这个图形稍微分析一下发现还是蛮简单的，就是让一个正放形，以屏幕中点（即初始正方形左下角顶点）为圆心进行旋转。 diff --git a/15.md b/15.md index 1676c6d..6ac7936 100644 --- a/15.md +++ b/15.md @@ -49,7 +49,7 @@ 运行结果： -![缩放变换](http://7xkcl8.com1.z0.glb.clouddn.com/edu15-1.png-html.jpg) +![缩放变换](http://airing.ursb.me/edu15-1.png-html.jpg) ### 缩放变换应注意的问题 diff --git a/16.md b/16.md index f598ec3..bde6c10 100644 --- a/16.md +++ b/16.md @@ -6,7 +6,7 @@ 在介绍矩阵变换`transform()`前，我们来说一说什么是变换矩阵。 -![变换矩阵](http://7xkcl8.com1.z0.glb.clouddn.com/edu16-1.png-normal.jpg) +![变换矩阵](http://airing.ursb.me/edu16-1.png-normal.jpg) 以上是Canvas中`transform()`方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为`context.transform(a,b,c,d,e,f)`。 @@ -33,7 +33,7 @@ ### 平移变换 -![平移变换](http://7xkcl8.com1.z0.glb.clouddn.com/edu16-2.jpg-normal.jpg) +![平移变换](http://airing.ursb.me/edu16-2.jpg-normal.jpg) 如上图所示： `x’ = x + dx`， @@ -53,7 +53,7 @@ ### 旋转变换 -![旋转变换](http://7xkcl8.com1.z0.glb.clouddn.com/edu16-3.jpeg-normal.jpg) +![旋转变换](http://airing.ursb.me/edu16-3.jpeg-normal.jpg) 如上图图所示： B点是通过A点逆时针旋转θ得到， @@ -65,7 +65,7 @@ B点是通过A点逆时针旋转θ得到， `y’=r*sin(a+θ)=x*sinθ+y*cosθ` 也即是 -![变换矩阵](http://7xkcl8.com1.z0.glb.clouddn.com/edu16-4.jpg) +![变换矩阵](http://airing.ursb.me/edu16-4.jpg) 综上： `context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), @@ -136,7 +136,7 @@ Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180)，0，0）`替代。 运行结果： -![transform](http://7xkcl8.com1.z0.glb.clouddn.com/edu16-5.png-html.jpg) +![transform](http://airing.ursb.me/edu16-5.png-html.jpg) ## `setTransform()`方法 @@ -194,7 +194,7 @@ Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180)，0，0）`替代。 运行结果： -![setTransform](http://7xkcl8.com1.z0.glb.clouddn.com/edu16-6.png-html.jpg) +![setTransform](http://airing.ursb.me/edu16-6.png-html.jpg) 解释一下过程：每当我们调用 `setTransform()` 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面。 diff --git a/17.md b/17.md index f67f547..00d9d4f 100644 --- a/17.md +++ b/17.md @@ -78,7 +78,7 @@ 运行结果： -![基本文本显示](http://7xkcl8.com1.z0.glb.clouddn.com/edu17-1.png-html.jpg) +![基本文本显示](http://airing.ursb.me/edu17-1.png-html.jpg) ## 设置文本字体`font` @@ -121,7 +121,7 @@ font-variant 属性设置小型大写字母的字体显示文本，这意味着 看下面的一张图片就知道这属性啥意思啦。 -![font-variant](http://7xkcl8.com1.z0.glb.clouddn.com/edu17-2.png-normal.jpg) +![font-variant](http://airing.ursb.me/edu17-2.png-normal.jpg) 就是这样，上面一行是使用的默认值normal，下面一行使用的是small-caps。效果就是，原本大写的英文字母不变，小写的英文字母变成大写，但是大小不变。 @@ -170,7 +170,7 @@ HTML5支持常用字体，如果没有可以使用`@font-face`扩展字体。但 [演示 17-2](http://airingursb.github.io/canvas/Canvas/17/17-2.html) -![font-face](http://7xkcl8.com1.z0.glb.clouddn.com/edu17-3.png-html.jpg) +![font-face](http://airing.ursb.me/edu17-3.png-html.jpg) 这里的字体是我从国内的一个网站——[字体下载大宝库]()中下载的，蛮不错的，如果大家需要啥字体都可以去看看。我这里下载的字体库只有A-Z这26个大写英文字母，所以遇到小写的自动转大写，遇到汉字或者数字它指定用星星符号代替。使用了CSS3中的`@font-face`即可自定义字体，是不是非常的酷。 @@ -247,7 +247,7 @@ HTML5支持常用字体，如果没有可以使用`@font-face`扩展字体。但 运行结果： -![文本渲染](http://7xkcl8.com1.z0.glb.clouddn.com/edu17-4.png-html.jpg) +![文本渲染](http://airing.ursb.me/edu17-4.png-html.jpg) 这里第一行使用的是一般颜色的`strokeText()`方法，第二行使用的是渐变色的`fillText()`方法，第三行设置了maxlen，第四行给字体填充的是纹理图案，第五行是广告……欢迎访问[个人博客](http://airingursb.github.io)！ diff --git a/18.md b/18.md index b983d77..e1ec07a 100644 --- a/18.md +++ b/18.md @@ -76,7 +76,7 @@ 运行结果： -![textAlign](http://7xkcl8.com1.z0.glb.clouddn.com/edu18-1.png-html.jpg) +![textAlign](http://airing.ursb.me/edu18-1.png-html.jpg) ### 垂直对齐`textBaseline` @@ -94,7 +94,7 @@ |bottom|文本基线是 em 方框的底端。| 首先咱们通过一个图来看一下各个基线代表的位置。 -![基线](http://7xkcl8.com1.z0.glb.clouddn.com/edu18-2.gif) +![基线](http://airing.ursb.me/edu18-2.gif) 我们通过一个例子来直观的感受一下。 @@ -155,7 +155,7 @@ 运行结果： -![textBaseline](http://7xkcl8.com1.z0.glb.clouddn.com/edu18-3.png-html.jpg) +![textBaseline](http://airing.ursb.me/edu18-3.png-html.jpg) ## 文本度量 @@ -210,7 +210,7 @@ 运行结果： -![measureText](http://7xkcl8.com1.z0.glb.clouddn.com/edu18-4.png-html.jpg) +![measureText](http://airing.ursb.me/edu18-4.png-html.jpg) *** 至此，Canvas 文本API的内容已经说完了，是不是非常的简单。现在咱们已经有了书法家和艺术家的底蕴了，接下来，咱们学一些Canvas 高级内容API~是不是特别的激动~我们继续前进！😋 diff --git a/19.md b/19.md index d79acdf..7613f0c 100644 --- a/19.md +++ b/19.md @@ -28,7 +28,7 @@ context.shadowBlur= 2; 运行结果： -![textArranger](http://7xkcl8.com1.z0.glb.clouddn.com/edu19-1.png-html.jpg) +![textArranger](http://airing.ursb.me/edu19-1.png-html.jpg) ## 全局透明`globalAlpha` @@ -104,7 +104,7 @@ context.shadowBlur= 2; 运行结果： -![globalAlpha](http://7xkcl8.com1.z0.glb.clouddn.com/edu19-2.png-html.jpg) +![globalAlpha](http://airing.ursb.me/edu19-2.png-html.jpg) 是不是非常的酷？终于有点艺术家的范儿了吧。 @@ -181,7 +181,7 @@ context.shadowBlur= 2; 运行结果： -![globalCompositeOperation](http://7xkcl8.com1.z0.glb.clouddn.com/edu19-3.png-html.jpg) +![globalCompositeOperation](http://airing.ursb.me/edu19-3.png-html.jpg) 我这个代码相对比较简单，这里推荐一下[laijieyao的专栏——【HTML5】Canvas之globalCompositeOperation属性详解](http://blog.csdn.net/laijieyao/article/details/41862473)，这篇博客里面介绍了该属性的11值的不同效果，大家可以看一下有一个直观的感受。 diff --git a/20.md b/20.md index 772f84d..ade005a 100644 --- a/20.md +++ b/20.md @@ -83,7 +83,7 @@ Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该 运行结果： -![裁剪区域](http://7xkcl8.com1.z0.glb.clouddn.com/edu20-2.png-html.jpg) +![裁剪区域](http://airing.ursb.me/edu20-2.png-html.jpg) 自己分析吧，能够理解这段程序，就完全掌握了`clip()`方法的使用了。 @@ -155,7 +155,7 @@ Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该 运行结果： -![drawImage()](http://7xkcl8.com1.z0.glb.clouddn.com/edu20-3.png-html.jpg) +![drawImage()](http://airing.ursb.me/edu20-3.png-html.jpg) ## 创建相框 @@ -210,7 +210,7 @@ Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该 运行结果截图： -![绘制心形相框](http://7xkcl8.com1.z0.glb.clouddn.com/edu20-4.png) +![绘制心形相框](http://airing.ursb.me/edu20-4.png) 是不是美美的？好啦，至此最关键的遮罩和图像裁剪已经说完了，其实在java.awt中，`drawImage()`也是一个至关重要的方法。有人说制作Java游戏界面，只要会用`drawImage()`就可以一招打遍天下~在Canvas里也是一样的。美工提供的素材基本都是图片，这个时候`drawImage()`对图片的处理就很重要了。既是基本功，也是对图片最重要的处理方法。 diff --git a/21.md b/21.md index a915fd1..bc7085a 100644 --- a/21.md +++ b/21.md @@ -4,11 +4,11 @@ 平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用`fill()`染色呢？ -![不规则图形](http://7xkcl8.com1.z0.glb.clouddn.com/edu21-1.jpg) +![不规则图形](http://airing.ursb.me/edu21-1.jpg) 这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域是里面，哪块区域是外面。接下来，我们具体来看下什么是非零环绕原则。 -![非零环绕原则](http://7xkcl8.com1.z0.glb.clouddn.com/edu21-2.jpg) +![非零环绕原则](http://airing.ursb.me/edu21-2.jpg) 首先，我们得给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。我们先假定路径的正方向为1（其实为-1啥的也都可以，正负方向互为相反数，不是0就行），那么反方向就是其相反数-1。 @@ -24,7 +24,7 @@ S3中引出的射线L3，与两条子路径相交，但是其中有一条的反 记得我们之前学过的`arc`方法吗？它的最后一个参数就是判断是路径方向的，如果是路径相反的两个同心圆在一起，图上色会有什么神奇的效果呢？ -![圆环](http://7xkcl8.com1.z0.glb.clouddn.com/edu21-3.jpg) +![圆环](http://airing.ursb.me/edu21-3.jpg) 下面我们通过代码来实现它。 @@ -74,7 +74,7 @@ S3中引出的射线L3，与两条子路径相交，但是其中有一条的反 运行结果： -![绘制圆环](http://7xkcl8.com1.z0.glb.clouddn.com/edu21-4.png-html.jpg) +![绘制圆环](http://airing.ursb.me/edu21-4.png-html.jpg) 结合我们上一节学到了阴影效果，这个圆环看上去是不是特别的有立体感？ @@ -155,7 +155,7 @@ S3中引出的射线L3，与两条子路径相交，但是其中有一条的反 运行结果： -![镂空剪纸效果](http://7xkcl8.com1.z0.glb.clouddn.com/edu21-5.png-html.jpg) +![镂空剪纸效果](http://airing.ursb.me/edu21-5.png-html.jpg) 这里手动绘制矩形的原因是我们想要得到逆时针路径的矩形，而且API提供的`rect()`方法绘制是顺时针矩形。另外，需要注意的是，这个剪纸是一个图形，一个路径。不能在绘制镂空三角形和绘制镂空矩形的方法里使用`beginPath()`和`closePath()`，不然它们就会是新的路径、新的图形，而不是剪纸的子路径、子图形，就无法使用非零环绕原则。 diff --git a/22.md b/22.md index bf048a0..70068ff 100644 --- a/22.md +++ b/22.md @@ -46,7 +46,7 @@ 运行结果： -![清空画布](http://7xkcl8.com1.z0.glb.clouddn.com/edu22-1.png-html.jpg) +![清空画布](http://airing.ursb.me/edu22-1.png-html.jpg) 橡皮擦就是这么简单~ @@ -133,7 +133,7 @@ 运行结果： -![点泡泡小游戏](http://7xkcl8.com1.z0.glb.clouddn.com/edu22-2.png-html.jpg) +![点泡泡小游戏](http://airing.ursb.me/edu22-2.png-html.jpg) 这个是基于[示例 19-2](http://airingursb.github.io/canvas/Canvas/19/19-2.html)小的交互游戏。鼠标移动到小球上，小球就会渐渐消失。这里用到了鼠标事件`canvas.addEventListener("mousemove",function);`以后会详细说。还用到了一个新的API——`isPointInPath()`。这个方法接收两个参数，就是一个点的坐标值，用来判断指定的点是否在当前路径中。若是，则返回true。 diff --git a/README.md b/README.md index d78cfcb..9b39663 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 如果您喜欢本书，请使用支付宝扫描下面的二维码捐助作者。 -![二维码](http://7xkcl8.com1.z0.glb.clouddn.com/ursbzhifubao.png) +![二维码](http://airing.ursb.me/ursbzhifubao.png) 谢谢您的支持！也欢迎您订阅本书。 @@ -19,4 +19,4 @@ 本书GitHub：[http://github.com/airingursb/canvas](http://github.com/airingursb/canvas) -![Canvas--Draw on the Web](http://7xkcl8.com1.z0.glb.clouddn.com/cover.jpg) \ No newline at end of file +![Canvas--Draw on the Web](http://airing.ursb.me/cover.jpg) \ No newline at end of file