simple use ways with canvas

ZWkang · ZWkang · commit 5cec2221f07e · 2018-02-03T00:01:02.000+08:00
diff --git a/HTML5Test/canvas/base_use.html b/HTML5Test/canvas/base_use.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>base use</title>
+    <script src="./common/base_use.js"></script>
+</head>
+<body>
+    <canvas id="container"></canvas>
+    <script>
+        let canvas = document.querySelector('#container')
+        let ctx = canvas.getContext('2d')
+        ctx.fillRect(25,25,100,100)
+        ctx.clearRect(45,45,60,60)
+        ctx.strokeRect(50,50,50,50)
+    </script>
+</body>
+</html>
diff --git a/HTML5Test/canvas/basic_path_function.html b/HTML5Test/canvas/basic_path_function.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Basic Path Function</title>
+</head>
+<body>
+    <canvas id="container"></canvas>
+    <script>
+        let canvas = document.querySelector('#container')
+        let ctx = canvas.getContext('2d')
+        /**
+         * 首先 需要创建路径起始点
+         * 然后你使用画图命令去画出路径
+         * 之后你把路径封闭
+         * 一旦路径生成，可以听过描边或填充路径区域来渲染
+         */
+        // beginPath 新建一条路径
+        // closePath 闭合路径之后图形绘制命令又重新指向到上下文中
+        // stroke 使用线条来绘制轮廓
+        // fill 使用填充来生成图形
+
+        // 开始路径 => 描绘路径 => 关闭路径
+        // 三角形
+        ctx.beginPath()
+        ctx.moveTo(75,50)
+        ctx.lineTo(100,75)
+        ctx.lineTo(100,25)
+        ctx.fill()
+
+        
+    </script>
+</body>
+</html>
diff --git a/HTML5Test/canvas/moveTo_function.html b/HTML5Test/canvas/moveTo_function.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>simple moveTo demo</title>
+</head>
+<body>
+    <canvas id="container"></canvas>
+    <script>
+        let canvas = document.querySelector('#container')
+        let ctx = canvas.getContext('2d')
+        ctx.beginPath()
+        ctx.arc(75 ,75 ,50 ,0 ,Math.PI*2 ,true) //绘制
+        ctx.moveTo(110,75);
+        ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
+        ctx.moveTo(65,65);
+        ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
+        ctx.moveTo(95,65);
+        ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
+        ctx.stroke();
+        
+        // lineTo 是线
+
+
+        // arc(x, y, radius, startAngle, endAngle, anticlockwise)
+        // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
+        // arcTo(x1, y1, x2, y2, radius)
+        // 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
+    </script>
+</body>
+</html>
diff --git a/HTML5Test/canvas/simple_arc_function.html b/HTML5Test/canvas/simple_arc_function.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>simple moveTo demo</title>
+</head>
+<body>
+    <canvas id="container"></canvas>
+    <script>
+        let canvas = document.querySelector('#container')
+        let ctx = canvas.getContext('2d')
+        for(let i = 0 ; i < 4 ; i++){
+            for(let j = 0 ; j < 3 ; j++){
+                ctx.beginPath()
+                let x = 25 + j * 50; //X坐标值
+                let y = 25 + i * 50; //y坐标值
+                let radius = 20 //圆弧半径
+                let startAngle = 0 // 开始点
+                let endAngle = Math.PI + (Math.PI * j) /2 ;//结束点
+                let anticlockwise = i % 2 == 0 ? false : true ; //顺时针或逆时针
+
+                ctx.arc(x ,y ,radius ,startAngle ,endAngle ,anticlockwise);
+                if(i > 1){
+                    ctx.fill();
+                }else{
+                    ctx.stroke();
+                }
+            }
+        }
+    </script>
+</body>
+</html>
