diff --git a/01.md b/01.md index 98f71fd..e3307c1 100644 --- a/01.md +++ b/01.md @@ -41,18 +41,18 @@ HTML5是新一代的HTML(Hyper Text Markup Language)，即超文本标记语言 -基础的HTML5页面 +基础的HTML5页面 -Hello Airing! - +Hello Airing! + ``` [演示 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是由一个个形如尖括号`<>`的标签元素组成，这些标签**通常是成对出现，并且标签之间只能嵌套不能交叉**。 diff --git a/02.md b/02.md index 034fd7f..cd18719 100644 --- a/02.md +++ b/02.md @@ -9,14 +9,14 @@ -基础的HTML5页面 +基础的HTML5页面 你的浏览器居然不支持Canvas？！赶快换一个吧！！ - + ``` @@ -44,14 +44,14 @@ 你的浏览器居然不支持Canvas？！赶快换一个吧！！ - + ``` [演示 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) 对以上代码有几点说明： diff --git a/03.md b/03.md index 8540a4d..4e12228 100644 --- a/03.md +++ b/03.md @@ -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) 这里我将原本 `` 标签中的 `width` 和 `height` 去掉了，但在JavaScript代码中设置了 `canvas` 对象的 `width` 和 `height` 的属性。 diff --git a/04.md b/04.md index bf94d4c..9ba562e 100644 --- a/04.md +++ b/04.md @@ -43,7 +43,7 @@ 运行结果： -![绘制折线](http://airing.ursb.me/edu4-1.png-html.jpg) +![绘制折线](http://airing.ursb.me/edu4-1.png) ## 绘制多条折线 @@ -96,11 +96,11 @@ ``` -[演示 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是基于状态的绘制**。 @@ -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()`之后会讲到。 diff --git a/05.md b/05.md index 82230a0..8b22ae8 100644 --- a/05.md +++ b/05.md @@ -44,7 +44,7 @@ 运行结果： -![绘制矩形](http://airing.ursb.me/edu5-1.png-html.jpg) +![绘制矩形](http://airing.ursb.me/edu5-1.png) 乍一看没啥问题，但是视力好的童鞋已经发现了，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了`lineWidth`导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽，这种缺口就越明显。那么这种情况该怎么避免呢？ @@ -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()`) @@ -148,7 +148,7 @@ 运行结果： -![给矩形上色](http://airing.ursb.me/edu5-3.png-html.jpg) +![给矩形上色](http://airing.ursb.me/edu5-3.png) 这里需要注意的是一个良好的编码规范。因为之前说过了Canvas是基于状态的绘制，只有调用了`stroke()`和`fill()`才确定绘制。所以我们要把这两行代码放在最后，其余的状态设置的代码放在它们之前，将*状态设置*与*确定绘制*的代码分隔开。增强代码的可读性。 @@ -166,12 +166,12 @@ JavaScript 和 ActionScript 语言的函数声明调用一样，都是编程语 函数的作用，可以写一次代码，然后反复地重用这个代码。如:我们要完成多组数和的功能。 ```JavaScript -var sum; +var sum; sum = 3+2; alert(sum); sum=7+8 ; -alert(sum); +alert(sum); .... //不停重复两行代码 ``` @@ -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()方法绘制矩形 @@ -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函数讲解。 diff --git a/06.md b/06.md index 73acc44..3d59ee1 100644 --- a/06.md +++ b/06.md @@ -96,7 +96,7 @@ strokeStyle 定义线和形状边框的颜色和样式。 运行结果： -![线条的帽子](http://airing.ursb.me/edu6-1.png-html.jpg) +![线条的帽子](http://airing.ursb.me/edu6-1.png) 这里我还做了两条平行线做一下参考，这样一眼就能看清`lineCap`三个值的特点。但要注意，这个帽子只在线条的端点处起作用，哪怕是折点很多的折线，也仅仅是在开始和终止的两个端点带帽子。如果想改变线条折点(两个线段的连接处)的样式，那就要用到下面的`lineJoin`属性。 @@ -161,7 +161,7 @@ strokeStyle 定义线和形状边框的颜色和样式。 运行结果： -![线条的连接](http://airing.ursb.me/edu6-2.png-html.jpg) +![线条的连接](http://airing.ursb.me/edu6-2.png) 看不清的童鞋自己放大网页或者自己将代码的线宽调宽一点。 @@ -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。可以看出来，这个值和线宽以及夹角有关，具体是啥关系。看下图。 @@ -304,7 +304,7 @@ strokeStyle 定义线和形状边框的颜色和样式。 运行结果： -![高级线段绘制举例](http://airing.ursb.me/edu6-5.png-html.jpg) +![高级线段绘制举例](http://airing.ursb.me/edu6-5.png) 这 3 个线段和连接的实例有助于说明在画布上绘制线段时不同属性的组合。 diff --git a/07.md b/07.md index c914733..f7297fd 100644 --- a/07.md +++ b/07.md @@ -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等绘图工具，用过其中的渐变色设置，应该会很好理解。 @@ -235,7 +235,7 @@ context.strokeStyle = grd; 运行结果： -![复杂的线性渐变](http://airing.ursb.me/edu7-3.png-html.jpg) +![复杂的线性渐变](http://airing.ursb.me/edu7-3.png) 这两个页面都是水平渐变，但是要清楚线性渐变不一定是水平的，方向可以是任意的，通过渐变线的端点来设置方向。 @@ -310,7 +310,7 @@ context.strokeStyle = grd; 运行结果： -![径向渐变](http://airing.ursb.me/edu7-4.png-html.jpg) +![径向渐变](http://airing.ursb.me/edu7-4.png) 怎么感觉这个颜色搭配那么的……算了，这个就叫做艺术。 diff --git a/08.md b/08.md index 45b4c93..d27bfd6 100644 --- a/08.md +++ b/08.md @@ -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的代码体。这个是必须的，如果不写的话，画布将会显示黑屏。因为没有等待图片加载完成就填充纹理，导致浏览器找不到图片。 diff --git a/09.md b/09.md index 7c2be7b..01be5b5 100644 --- a/09.md +++ b/09.md @@ -50,7 +50,7 @@ 运行结果： -![新的画布](http://airing.ursb.me/edu9-1.png-html.jpg) +![新的画布](http://airing.ursb.me/edu9-1.png) 之所以要绘制一个空白的矩形填满画布，是因为我们之前说过，canvas是透明的，如果不设置背景色，那么它就会被我设置的``纹理所覆盖，想要使其拥有背景色（白色），只有绘制矩形覆盖canvas这一个方法。 @@ -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。 @@ -78,7 +78,7 @@ 圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。 -![圆角矩形的组成](http://airing.ursb.me/edu9-3.png-normal.jpg) +![圆角矩形的组成](http://airing.ursb.me/edu9-3.png) 因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。 @@ -129,12 +129,12 @@ ``` - + [演示 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) 建议大家自己动手绘制一个圆角矩形，这样有助于对路径的掌握。 @@ -208,7 +208,7 @@ 运行结果： -![2048游戏界面](http://airing.ursb.me/edu9-5.png-html.jpg) +![2048游戏界面](http://airing.ursb.me/edu9-5.png) 这个圆角矩形的函数写好之后，可以自己封装进JS文件里，以后遇到什么好的函数都可以放进去，这样积累下来，这个文件就是一套属于自己的图形库和游戏引擎了，是不是非常的酷？ diff --git a/10.md b/10.md index 61eb53b..b35227a 100644 --- a/10.md +++ b/10.md @@ -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)一定在圆弧上。 @@ -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)连接起来形成线段。好执着的弧线…… @@ -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)。本节就不再重复给出界面代码了。 diff --git a/11.md b/11.md index 82420ef..b250fe4 100644 --- a/11.md +++ b/11.md @@ -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) 这里我把三个控制点调好，变成一个大山的形状，右侧自动生成了代码，我们只要复制就行了。 @@ -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()`绘制，就可以尝试一下使用这个工具绘制贝塞尔曲线。 diff --git a/12.md b/12.md index 7903733..f1896c5 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://airing.ursb.me/edu12-1.png-html.jpg) +![三次贝塞尔曲线交互工具](http://airing.ursb.me/edu12-1.png) ## 绘制XP壁纸 @@ -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) 是不是很萌？是不是非常的酷！这个案例几乎用到了之前所传授给你们的所有武功——三次贝塞尔曲线，径向渐变，线性渐变，绘制圆弧等等。分开写了三个函数，一个绘制草原、一个绘制蓝天、一个绘制白云……大家尝试自己实现一下，当做一次阶段性复习~ diff --git a/13.md b/13.md index aa146be..9fcc737 100644 --- a/13.md +++ b/13.md @@ -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）处。 @@ -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）处了，所以如果继续平移，这个再基于新坐标系继续平移坐标系。那么要怎么去解决呢？很简单，有两个方法。 @@ -186,7 +186,7 @@ 运行结果： -![状态保存结合图形变换](http://airing.ursb.me/edu13-4.png-html.jpg) +![状态保存结合图形变换](http://airing.ursb.me/edu13-4.png) 因此，**在使用图形变换的时候，要记得结合使用状态保存**。 diff --git a/14.md b/14.md index b7dd494..64373ca 100644 --- a/14.md +++ b/14.md @@ -59,13 +59,13 @@ 运行结果： -![旋转变换](http://airing.ursb.me/edu14-1.png-html.jpg) +![旋转变换](http://airing.ursb.me/edu14-1.png) 这里用for循环绘制了14对正方形，其中蓝色是旋转前的正方形，红色是旋转后的正方形。每次旋转都以正方形左上角顶点为原点进行旋转。每次绘制都被`save()`与`restore()`包裹起来，每次旋转前都移动了坐标系。童鞋们可以自己动动手，实践一下，就能体会到旋转变换的奥妙了。 ## 绘制魔性Logo -![魔性Logo](http://airing.ursb.me/edu14-2.jpg-normal.jpg) +![魔性Logo](http://airing.ursb.me/edu14-2.jpg) 这是在度娘上看到了一个logo，巧妙运用了旋转变换，用一个很简单矩形，通过旋转变换，变成了一个很漂亮的logo。这logo是不是很有魔性？童鞋们动动脑，尝试实现一下它。下面，提供我实现它的代码。 @@ -114,7 +114,7 @@ 运行结果： -![魔性Logo](http://airing.ursb.me/edu14-3.png-html.jpg) +![魔性Logo](http://airing.ursb.me/edu14-3.png) 是不是非常的酷？这个图形稍微分析一下发现还是蛮简单的，就是让一个正放形，以屏幕中点（即初始正方形左下角顶点）为圆心进行旋转。 diff --git a/15.md b/15.md index 6ac7936..7386ed8 100644 --- a/15.md +++ b/15.md @@ -49,7 +49,7 @@ 运行结果： -![缩放变换](http://airing.ursb.me/edu15-1.png-html.jpg) +![缩放变换](http://airing.ursb.me/edu15-1.png) ### 缩放变换应注意的问题 diff --git a/16.md b/16.md index bde6c10..71b6c8c 100644 --- a/16.md +++ b/16.md @@ -6,7 +6,7 @@ 在介绍矩阵变换`transform()`前，我们来说一说什么是变换矩阵。 -![变换矩阵](http://airing.ursb.me/edu16-1.png-normal.jpg) +![变换矩阵](http://airing.ursb.me/edu16-1.png) 以上是Canvas中`transform()`方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为`context.transform(a,b,c,d,e,f)`。 @@ -33,7 +33,7 @@ ### 平移变换 -![平移变换](http://airing.ursb.me/edu16-2.jpg-normal.jpg) +![平移变换](http://airing.ursb.me/edu16-2.jpg) 如上图所示： `x’ = x + dx`， @@ -53,7 +53,7 @@ ### 旋转变换 -![旋转变换](http://airing.ursb.me/edu16-3.jpeg-normal.jpg) +![旋转变换](http://airing.ursb.me/edu16-3.jpeg) 如上图图所示： B点是通过A点逆时针旋转θ得到， @@ -136,7 +136,7 @@ Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180)，0，0）`替代。 运行结果： -![transform](http://airing.ursb.me/edu16-5.png-html.jpg) +![transform](http://airing.ursb.me/edu16-5.png) ## `setTransform()`方法 @@ -194,7 +194,7 @@ Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180)，0，0）`替代。 运行结果： -![setTransform](http://airing.ursb.me/edu16-6.png-html.jpg) +![setTransform](http://airing.ursb.me/edu16-6.png) 解释一下过程：每当我们调用 `setTransform()` 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面。 diff --git a/17.md b/17.md index 1c17cda..8fe80af 100644 --- a/17.md +++ b/17.md @@ -67,7 +67,7 @@ context.fillStyle = "#00AAAA"; //3. 使用`fillText()`方法显示字体。 context.fillText("《CANVAS--Draw on the Web》",50,300); - + }; @@ -78,7 +78,7 @@ 运行结果： -![基本文本显示](http://airing.ursb.me/edu17-1.png-html.jpg) +![基本文本显示](http://airing.ursb.me/edu17-1.png) ## 设置文本字体`font` @@ -87,8 +87,8 @@ 基本格式如下。 ```JavaScript -context.font = -"[font-style] [font-variant] [font-weight] +context.font = +"[font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]" ``` @@ -121,7 +121,7 @@ font-variant 属性设置小型大写字母的字体显示文本，这意味着 看下面的一张图片就知道这属性啥意思啦。 -![font-variant](http://airing.ursb.me/edu17-2.png-normal.jpg) +![font-variant](http://airing.ursb.me/edu17-2.png) 就是这样，上面一行是使用的默认值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://airing.ursb.me/edu17-3.png-html.jpg) +![font-face](http://airing.ursb.me/edu17-3.png) 这里的字体是我从国内的一个网站——[字体下载大宝库]()中下载的，蛮不错的，如果大家需要啥字体都可以去看看。我这里下载的字体库只有A-Z这26个大写英文字母，所以遇到小写的自动转大写，遇到汉字或者数字它指定用星星符号代替。使用了CSS3中的`@font-face`即可自定义字体，是不是非常的酷。 @@ -247,7 +247,7 @@ HTML5支持常用字体，如果没有可以使用`@font-face`扩展字体。但 运行结果： -![文本渲染](http://airing.ursb.me/edu17-4.png-html.jpg) +![文本渲染](http://airing.ursb.me/edu17-4.png) 这里第一行使用的是一般颜色的`strokeText()`方法，第二行使用的是渐变色的`fillText()`方法，第三行设置了maxlen，第四行给字体填充的是纹理图案，第五行是广告……欢迎访问[个人博客](http://airingursb.github.io)！ diff --git a/18.md b/18.md index e1ec07a..d15d9ad 100644 --- a/18.md +++ b/18.md @@ -76,7 +76,7 @@ 运行结果： -![textAlign](http://airing.ursb.me/edu18-1.png-html.jpg) +![textAlign](http://airing.ursb.me/edu18-1.png) ### 垂直对齐`textBaseline` @@ -155,7 +155,7 @@ 运行结果： -![textBaseline](http://airing.ursb.me/edu18-3.png-html.jpg) +![textBaseline](http://airing.ursb.me/edu18-3.png) ## 文本度量 @@ -210,7 +210,7 @@ 运行结果： -![measureText](http://airing.ursb.me/edu18-4.png-html.jpg) +![measureText](http://airing.ursb.me/edu18-4.png) *** 至此，Canvas 文本API的内容已经说完了，是不是非常的简单。现在咱们已经有了书法家和艺术家的底蕴了，接下来，咱们学一些Canvas 高级内容API~是不是特别的激动~我们继续前进！😋 diff --git a/19.md b/19.md index 7613f0c..8d8ec6e 100644 --- a/19.md +++ b/19.md @@ -28,7 +28,7 @@ context.shadowBlur= 2; 运行结果： -![textArranger](http://airing.ursb.me/edu19-1.png-html.jpg) +![textArranger](http://airing.ursb.me/edu19-1.png) ## 全局透明`globalAlpha` @@ -82,7 +82,7 @@ context.shadowBlur= 2; context.fillRect(0,0,800,600); context.globalAlpha = 0.5; - + for(var i=0; i<=50; i++){ var R = Math.floor(Math.random() * 255); var G = Math.floor(Math.random() * 255); @@ -104,7 +104,7 @@ context.shadowBlur= 2; 运行结果： -![globalAlpha](http://airing.ursb.me/edu19-2.png-html.jpg) +![globalAlpha](http://airing.ursb.me/edu19-2.png) 是不是非常的酷？终于有点艺术家的范儿了吧。 @@ -181,7 +181,7 @@ context.shadowBlur= 2; 运行结果： -![globalCompositeOperation](http://airing.ursb.me/edu19-3.png-html.jpg) +![globalCompositeOperation](http://airing.ursb.me/edu19-3.png) 我这个代码相对比较简单，这里推荐一下[laijieyao的专栏——【HTML5】Canvas之globalCompositeOperation属性详解](http://blog.csdn.net/laijieyao/article/details/41862473)，这篇博客里面介绍了该属性的11值的不同效果，大家可以看一下有一个直观的感受。 diff --git a/20.md b/20.md index ade005a..f72f7d6 100644 --- a/20.md +++ b/20.md @@ -83,7 +83,7 @@ Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该 运行结果： -![裁剪区域](http://airing.ursb.me/edu20-2.png-html.jpg) +![裁剪区域](http://airing.ursb.me/edu20-2.png) 自己分析吧，能够理解这段程序，就完全掌握了`clip()`方法的使用了。 @@ -155,7 +155,7 @@ Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该 运行结果： -![drawImage()](http://airing.ursb.me/edu20-3.png-html.jpg) +![drawImage()](http://airing.ursb.me/edu20-3.png) ## 创建相框 diff --git a/21.md b/21.md index bc7085a..8051079 100644 --- a/21.md +++ b/21.md @@ -74,7 +74,7 @@ S3中引出的射线L3，与两条子路径相交，但是其中有一条的反 运行结果： -![绘制圆环](http://airing.ursb.me/edu21-4.png-html.jpg) +![绘制圆环](http://airing.ursb.me/edu21-4.png) 结合我们上一节学到了阴影效果，这个圆环看上去是不是特别的有立体感？ @@ -151,11 +151,11 @@ S3中引出的射线L3，与两条子路径相交，但是其中有一条的反 ``` -[演示 21-3](http://airingursb.github.io/canvas/Canvas/21/21-3.html) +[演示 21-2](http://airingursb.github.io/canvas/Canvas/21/21-2.html) 运行结果： -![镂空剪纸效果](http://airing.ursb.me/edu21-5.png-html.jpg) +![镂空剪纸效果](http://airing.ursb.me/edu21-5.png) 这里手动绘制矩形的原因是我们想要得到逆时针路径的矩形，而且API提供的`rect()`方法绘制是顺时针矩形。另外，需要注意的是，这个剪纸是一个图形，一个路径。不能在绘制镂空三角形和绘制镂空矩形的方法里使用`beginPath()`和`closePath()`，不然它们就会是新的路径、新的图形，而不是剪纸的子路径、子图形，就无法使用非零环绕原则。 diff --git a/22.md b/22.md index 70068ff..2bbfdcd 100644 --- a/22.md +++ b/22.md @@ -46,7 +46,7 @@ 运行结果： -![清空画布](http://airing.ursb.me/edu22-1.png-html.jpg) +![清空画布](http://airing.ursb.me/edu22-1.png) 橡皮擦就是这么简单~ @@ -133,7 +133,7 @@ 运行结果： -![点泡泡小游戏](http://airing.ursb.me/edu22-2.png-html.jpg) +![点泡泡小游戏](http://airing.ursb.me/edu22-2.png) 这个是基于[示例 19-2](http://airingursb.github.io/canvas/Canvas/19/19-2.html)小的交互游戏。鼠标移动到小球上，小球就会渐渐消失。这里用到了鼠标事件`canvas.addEventListener("mousemove",function);`以后会详细说。还用到了一个新的API——`isPointInPath()`。这个方法接收两个参数，就是一个点的坐标值，用来判断指定的点是否在当前路径中。若是，则返回true。 @@ -158,8 +158,8 @@ ## Canvas 图形库 不知不觉写了22个章节，所有我们写的图形其实都可以封装在一个JS文件里，这个文件就是属于我们自己的图形库、图形引擎。当然，第三方也提供了很多优秀的图形库，这里推荐三个给大家。 -1. [canvasplus](https://code.google.com/p/canvasplus/) -2. [Artisan JS](http://artisanjs.com/) +1. [canvasplus](https://code.google.com/p/canvasplus/) +2. [Artisan JS](http://artisanjs.com/) 3. [Rgraph](http://www.rgraph.net) 大家有兴趣的话可以自行查阅了解一下。