canvas 矩形区域

ty-122 · Aug 11, 2021 · d73258d · d73258d
1 parent 09eb4ce
commit d73258d
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 2 deletions.
diff --git a/learn-canvas/2-shape.ts → learn-canvas/2-shape-rect.ts b/learn-canvas/2-shape.ts → learn-canvas/2-shape-rect.ts
@@ -1,6 +1,6 @@
 /**
  * @author 素燕（我有个公众号：素燕）
- * @description 使用 JavaScript 创建 Canvas
+ * @description 绘制矩形
  */
 
 import {initCanvas} from './share';
@@ -20,13 +20,24 @@ function syRunDrawRectDemo() {
         ctx.clearRect(120, 200, 80, 80);
     }
 
+    const drawColorPannel = (ctx: CanvasRenderingContext2D) => {
+        for (let i = 0; i < 6; i++){
+            for (let j = 0; j < 6; j++){
+              ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                               Math.floor(255-42.5*j) + ',0)';
+              ctx.fillRect(j*25, i*25, 25, 25);
+            }
+          }
+    }
+
     // 1. 创建 canvas
     let ctx = initCanvas();
 
     // 在画布中画一个矩形区域
     drawReact(ctx);
     strokeReact(ctx);
     clearReact(ctx);
+    drawColorPannel(ctx);
 }
 
 syRunDrawRectDemo();
diff --git a/learn-canvas/3-shape-path.ts b/learn-canvas/3-shape-path.ts
@@ -0,0 +1,72 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 绘制路径（path）
+ */
+
+import { initCanvas } from './share';
+
+function syRunDrawPathDemo() {
+    // 绘制一根线
+    const drawLine = (ctx: CanvasRenderingContext2D) => {
+        // 不调用 beginPath 会有意想不到的结果
+        ctx.beginPath();
+        // 移动移动到某个位置
+        ctx.moveTo(40, 20);
+        // 从起点画一条线
+        ctx.lineTo(360, 20);
+        ctx.stroke();
+    }
+
+    const drawRect = (ctx: CanvasRenderingContext2D) => {
+        // 表示要开始画画
+        ctx.beginPath();
+        // 绘制图形不能随便写坐标，否则可能看不到任何效果
+        ctx.moveTo(40, 40);
+        ctx.lineTo(80, 40);
+        ctx.lineTo(80, 80);
+        ctx.lineTo(40, 80);
+        ctx.closePath();
+        ctx.stroke();
+    }
+
+    const drawTriangle = (ctx: CanvasRenderingContext2D) => {
+        ctx.beginPath();
+        ctx.moveTo(160, 40);
+        ctx.lineTo(200, 80);
+        ctx.lineTo(120, 80);
+        ctx.fill();
+    }
+
+    const drawSmil = (ctx: CanvasRenderingContext2D) => {
+        ctx.beginPath();
+        ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+        ctx.moveTo(110, 75);
+        ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
+        ctx.moveTo(65, 65);
+        ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
+        ctx.moveTo(95, 65);
+        ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
+        ctx.stroke();
+    }
+
+    const clearReact = (ctx: CanvasRenderingContext2D) => {
+        ctx.clearRect(120, 200, 80, 80);
+    }
+
+    // 1. 创建 canvas
+    let ctx = initCanvas();
+
+    // 初始化画布的一些属性
+    // 设置线的颜色
+    ctx.strokeStyle = 'red';
+    ctx.fillStyle = '#222';
+    ctx.lineWidth = 4;
+
+    // 在画布中画一个矩形区域
+    drawLine(ctx);
+    drawRect(ctx);
+    drawTriangle(ctx);
+    drawSmil(ctx);
+}
+
+syRunDrawPathDemo();
diff --git a/learn-canvas/index.html b/learn-canvas/index.html
@@ -15,6 +15,7 @@
     <h1>和素燕一起学可视化</h1>
     <div id="canvas-warp"></div>
     <!-- <script src="./1-create-canvas.ts" type="module"></script> -->
-    <script src="./2-shape.ts" type="module"></script>
+    <script src="./2-shape-rect.ts" type="module"></script>
+    <!-- <script src="./3-shape-path.ts" type="module"></script> -->
 </body>
 </html>
diff --git a/learn-canvas/share.ts b/learn-canvas/share.ts
@@ -44,6 +44,7 @@ export function initCanvas(): CanvasRenderingContext2D {
             }
         }
 
+        // 绘制 x 轴的线
         for (let i = 0; i < xCount; i++) {
             ctx.beginPath();
             ctx.moveTo(0, gridSpace * i);
@@ -55,6 +56,7 @@ export function initCanvas(): CanvasRenderingContext2D {
 
         }
 
+        // 绘制 y 轴的线
         for (let i = 0; i < yCount; i++) {
             ctx.beginPath();
             ctx.moveTo(gridSpace * i, 0);