add chapter21

Shawn-Cui · Aug 11, 2015 · 0e0f187 · 0e0f187
1 parent 47c5eb2
commit 0e0f187
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 0 deletions.
diff --git a/Canvas/21/21-1.html b/Canvas/21/21-1.html
@@ -0,0 +1,39 @@
+<!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.shadowColor = "#545454";
+        context.shadowOffsetX = 5;
+        context.shadowOffsetY = 5;
+        context.shadowBlur = 2;
+
+        context.arc(400, 300, 200, 0, Math.PI * 2 ,false);
+        context.arc(400, 300, 230, 0, Math.PI * 2 ,true);
+        context.fillStyle = "#00AAAA";
+        context.fill();
+    };
+</script>
+</body>
+</html>
diff --git a/Canvas/21/21-2.html b/Canvas/21/21-2.html
@@ -0,0 +1,68 @@
+<!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.rect(200,100,400,400);
+        drawPathRect(context, 250, 150, 300, 150);
+        drawPathTriangle(context, 345, 350, 420, 450, 270, 450);
+        context.arc(500, 400, 50, 0, Math.PI * 2, true);
+        context.closePath();
+
+        context.fillStyle = "#058";
+        context.shadowColor = "gray";
+        context.shadowOffsetX = 10;
+        context.shadowOffsetY = 10;
+        context.shadowBlur = 10;
+        context.fill();
+
+    };
+
+    //逆时针绘制矩形
+    function drawPathRect(cxt, x, y, w, h){
+        /**
+         * 这里不能使用beginPath和closePath，
+         * 不然就不属于子路径而是另一个全新的路径，
+         * 无法使用非零环绕原则
+         */
+        cxt.moveTo(x, y);
+        cxt.lineTo(x, y + h);
+        cxt.lineTo(x + w, y + h);
+        cxt.lineTo(x + w, y);
+        cxt.lineTo(x, y);
+
+    }
+
+    //逆时针绘制三角形
+    function drawPathTriangle(cxt, x1, y1, x2, y2, x3, y3){
+        cxt.moveTo(x1,y1);
+        cxt.lineTo(x3,y3);
+        cxt.lineTo(x2,y2);
+        cxt.lineTo(x1,y1);
+    }
+
+</script>
+</body>
+</html>
diff --git a/Canvas/21/images/bg1.jpg b/Canvas/21/images/bg1.jpg
diff --git a/Canvas/21/images/bg2.jpg b/Canvas/21/images/bg2.jpg
diff --git a/Canvas/21/images/bg3.jpg b/Canvas/21/images/bg3.jpg