add chapter17

Shawn-Cui · Aug 6, 2015 · 8ff90fa · 8ff90fa
1 parent e04ed39
commit 8ff90fa
Show file tree

Hide file tree

Showing 7 changed files with 246 additions and 0 deletions.
diff --git a/Canvas/17/17-1.html b/Canvas/17/17-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>基本文本显示</title>
+    <style>
+        body { background: url("./images/bg3.jpg") repeat; }
+        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
+    </style>
+</head>
+<body>
+<div id="canvas-warp">
+    <canvas id="canvas">
+        你的浏览器居然不支持Canvas？！赶快换一个吧！！
+    </canvas>
+</div>
+
+<script>
+    window.onload = function(){
+        var canvas = document.getElementById("canvas");
+        canvas.width = 800;
+        canvas.height = 600;
+        var context = canvas.getContext("2d");
+        context.fillStyle = "#FFF";
+        context.fillRect(0,0,800,600);
+
+        //1. 使用`font`设置字体。
+        context.font = "50px serif";
+        //2. 使用`fillStyle`设置字体颜色。
+        context.fillStyle = "#00AAAA";
+        //3. 使用`fillText()`方法显示字体。
+        context.fillText("《CANVAS--Draw on the Web》",50,300);
+
+    };
+</script>
+</body>
+</html>
diff --git a/Canvas/17/17-2.html b/Canvas/17/17-2.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Festival of Ornament</title>
+    <style type="text/css">
+        @font-face {
+            font-family: BorderWeb;
+            src:url(WORDSOFLOVE.ttf);
+        }
+        @font-face {
+            font-family: Runic;
+            src:url(WORDSOFLOVE.ttf);
+        }
+        @font-face {
+            font-family: Kingston;
+            src:url(WORDSOFLOVE.ttf);
+        }
+        *{background:#FFF}
+        .king { FONT-SIZE: 45pt; FONT-FAMILY: "Kingston" }
+        .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
+        .border2 { FONT-SIZE: 35px; COLOR:black; FONT-FAMILY: "BorderWeb" }
+        .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
+        .locale { FONT-SIZE: 40px; COLOR: black; FONT-FAMILY: "Runic" }
+        .bullet { FONT-SIZE: 50px; COLOR: black; FONT-FAMILY: "BorderWeb" }
+        .corner { FONT-SIZE: 70px; COLOR: black; FONT-FAMILY: "BorderWeb" }
+        a { FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: Verdana; TEXT-DECORATION: none }
+    </style>
+</head>
+<body>
+<table cellspacing="0" cellpadding="0" border="0">
+    <tbody>
+    <tr>
+        <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td>
+        <td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td>
+    </tr>
+    <tr>
+        <td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+    </tr>
+    <tr>
+        <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">A</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">a</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">B</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">b</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">C</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">c</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
+    </tr>
+    <tr>
+        <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">d</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">D</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">e</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">E</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">f</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">F</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
+    </tr>
+    <tr>
+        <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">G</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">g</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">H</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">h</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">I</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">i</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
+    </tr>
+    <tr>
+        <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">j</span></td>
+        <td align="middle" bgcolor="khaki"><span class="king">J</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">k</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">K</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">l</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">L</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
+    </tr>
+    <tr>
+        <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">M</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">m</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">N</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">n</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">O</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">o</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
+    </tr>
+    <tr>
+        <td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">p</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">P</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">q</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">Q</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive"><span class="king">r</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="king">R</span></td>
+        <td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
+        <td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
+    </tr>
+    <tr>
+        <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
+        <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td>
+    </tr>
+    <tr>
+        <td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+        <td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
+    </tr>
+    <tr>
+        <td height="15"></td>
+    </tr>
+    <tr>
+        <td valign="top" colspan="10">
+            <div class="event" align="center">CANVAS--Draw on the Web</div>
+            <div class="locale" align="center">By Airing<span class="bullet">4</span> August 6,2015 </div>
+        </td>
+    </tr>
+    </tbody>
+</table>
+</body>
+</html>
diff --git a/Canvas/17/17-3.html b/Canvas/17/17-3.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>文本渲染</title>
+    <style>
+        body { background: url("./images/bg3.jpg") repeat; }
+        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
+    </style>
+</head>
+<body>
+<div id="canvas-warp">
+    <canvas id="canvas">
+        你的浏览器居然不支持Canvas？！赶快换一个吧！！
+    </canvas>
+</div>
+
+<script>
+    window.onload = function(){
+        var canvas = document.getElementById("canvas");
+        canvas.width = 800;
+        canvas.height = 600;
+        var context = canvas.getContext("2d");
+        context.fillStyle = "#FFF";
+        context.fillRect(0,0,800,600);
+
+        context.beginPath();
+        context.font = "50px Verdana";
+        var gradient = context.createLinearGradient(0,0,800,0);
+        gradient.addColorStop("0","magenta");
+        gradient.addColorStop("0.5","blue");
+        gradient.addColorStop("1.0","red");
+        context.fillStyle = gradient;
+        context.strokeStyle = "#00AAAA";
+        context.strokeText("airingursb.github.io", 50, 100);
+        context.fillText("airingursb.github.io", 50, 200);
+
+        //限制宽度
+        context.fillText("airingursb.github.io", 50, 300, 200);
+
+        context.beginPath();
+        var img = new Image();
+        img.src = "./images/bg1.jpg";
+        img.onload = function(){
+            var pattern = context.createPattern(img, "repeat");
+            context.fillStyle = pattern;
+            context.fillText("airingursb.github.io", 50, 400);
+        }
+
+        context.beginPath();
+        context.fillStyle = "#00AAAA";
+        context.fillText("Airing的博客，欢迎访问", 50, 500);
+    };
+</script>
+</body>
+</html>
diff --git a/Canvas/17/WORDSOFLOVE.ttf b/Canvas/17/WORDSOFLOVE.ttf
diff --git a/Canvas/17/images/bg1.jpg b/Canvas/17/images/bg1.jpg
diff --git a/Canvas/17/images/bg2.jpg b/Canvas/17/images/bg2.jpg
diff --git a/Canvas/17/images/bg3.jpg b/Canvas/17/images/bg3.jpg