add chapter18

Shawn-Cui · Aug 7, 2015 · f49bb8d · f49bb8d
1 parent 8ff90fa
commit f49bb8d
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 0 deletions.
diff --git a/Canvas/18/18-1.html b/Canvas/18/18-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>textAlign</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);
+
+        // 在位置 400 创建蓝线
+        context.strokeStyle="blue";
+        context.moveTo(400,100);
+        context.lineTo(400,500);
+        context.stroke();
+
+
+        context.fillStyle = "#000";
+        context.font="50px Arial";
+
+        // 显示不同的 textAlign 值
+        context.textAlign="start";
+        context.fillText("textAlign=start", 400, 120);
+        context.textAlign="end";
+        context.fillText("textAlign=end", 400, 200);
+        context.textAlign="left";
+        context.fillText("textAlign=left", 400, 280);
+        context.textAlign="center";
+        context.fillText("textAlign=center", 400, 360);
+        context.textAlign="right";
+        context.fillText("textAlign=right", 400, 480);
+    };
+</script>
+</body>
+</html>
diff --git a/Canvas/18/18-2.html b/Canvas/18/18-2.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>textBaseline</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);
+
+        //在位置 y=300 绘制蓝色线条
+        context.strokeStyle="blue";
+        context.moveTo(0,300);
+        context.lineTo(800,300);
+        context.stroke();
+
+        context.fillStyle = "#00AAAA";
+        context.font="20px Arial";
+
+        //在 y=300 以不同的 textBaseline 值放置每个单词
+        context.textBaseline="top";
+        context.fillText("Top",150,300);
+        context.textBaseline="bottom";
+        context.fillText("Bottom",250,300);
+        context.textBaseline="middle";
+        context.fillText("Middle",350,300);
+        context.textBaseline="alphabetic";
+        context.fillText("Alphabetic",450,300);
+        context.textBaseline="hanging";
+        context.fillText("Hanging",550,300);
+    };
+</script>
+</body>
+</html>
diff --git a/Canvas/18/18-3.html b/Canvas/18/18-3.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>measureText</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.textAlign = "center";
+        context.textBaseline = "middle";
+
+        context.fillStyle = "#00AAAA";
+        context.font="30px Arial";
+        var txt="Hello Canvas";
+        context.fillText("width:" + context.measureText(txt).width,400,300);
+        context.fillText(txt,400,250);
+
+    };
+</script>
+</body>
+</html>
diff --git a/Canvas/18/images/bg1.jpg b/Canvas/18/images/bg1.jpg
diff --git a/Canvas/18/images/bg2.jpg b/Canvas/18/images/bg2.jpg
diff --git a/Canvas/18/images/bg3.jpg b/Canvas/18/images/bg3.jpg