canvas 学习

lwg649 · Aug 10, 2021 · b9acd24 · b9acd24
1 parent 98172a4
commit b9acd24
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 67 deletions.
diff --git a/learn-canvas/1-create-canvas.ts b/learn-canvas/1-create-canvas.ts
@@ -3,86 +3,90 @@
  * @description 使用 JavaScript 创建 Canvas
  */
 
-function toDraw() {
-const parentId = 'canvas-warp';
-const canvasWidth = 400;
-const canvasHeight = 400;
-const gridSpace = 40;
-const lineColor = '#cec';
-let dprValue = window.devicePixelRatio || 1;
+function syDraw() {
+    const parentId = 'canvas-warp';
+    const canvasWidth = 400;
+    const canvasHeight = 400;
+    const gridSpace = 40;
+    const lineColor = '#cec';
+    let dprValue = window.devicePixelRatio || 1;
 
-const createACanvas = () => {
-    let canvas = document.createElement('canvas') as HTMLCanvasElement;
-    // 设置画布的宽度
-    canvas.width = canvasWidth * dprValue;
-    // 设置画布的高度
-    canvas.height = canvasHeight * dprValue;
-    // 设置画布的 CSS 样式
-    canvas.style.width = `${canvasWidth}px`;
-    canvas.style.height = `${canvasHeight}px`;
-    canvas.style.backgroundColor = '#fff';
-    canvas.style.marginLeft = '40px';
-    canvas.style.marginTop = '40px';
-    return canvas;
-}
+    const createACanvas = () => {
+        let canvas = document.createElement('canvas') as HTMLCanvasElement;
+        // 设置画布的宽度
+        canvas.width = canvasWidth * dprValue;
+        // 设置画布的高度
+        canvas.height = canvasHeight * dprValue;
+        // 设置画布的 CSS 样式
+        canvas.style.width = `${canvasWidth}px`;
+        canvas.style.height = `${canvasHeight}px`;
+        canvas.style.backgroundColor = '#fff';
+        canvas.style.marginLeft = '40px';
+        canvas.style.marginTop = '40px';
+        return canvas;
+    }
 
     // 绘制网格
-const drawGrid = (ctx: CanvasRenderingContext2D) => {
-    let xCount = canvasHeight / gridSpace;
-    let yCount = canvasWidth / gridSpace;
+    const drawGrid = (ctx: CanvasRenderingContext2D) => {
+        let xCount = canvasHeight / gridSpace;
+        let yCount = canvasWidth / gridSpace;
 
-    const drawValue = (i, isX) => {
-        ctx.font = '12px';
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        ctx.fillStyle = '#222';
-        if (isX) {
-            ctx.fillText(`${i * gridSpace}`, 0, gridSpace * i);
-        }
-        else {
-            ctx.fillText(`${i * gridSpace}`, gridSpace * i, 0);
+        const drawValue = (i, isX) => {
+            ctx.font = '12px';
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'top';
+            ctx.fillStyle = '#222';
+            if (isX) {
+                ctx.fillText(`${i * gridSpace}`, 0, gridSpace * i);
+            }
+            else {
+                ctx.fillText(`${i * gridSpace}`, gridSpace * i, 0);
+            }
         }
-    }
 
-    for (let i = 0; i < xCount; i++) {
-        ctx.beginPath();
-        ctx.moveTo(0, gridSpace * i);
-        ctx.lineTo(canvasWidth, gridSpace * i);
-        ctx.strokeStyle = lineColor;
-        ctx.lineWidth = 1;
-        ctx.stroke();
-        drawValue(i, true);
+        for (let i = 0; i < xCount; i++) {
+            ctx.beginPath();
+            ctx.moveTo(0, gridSpace * i);
+            ctx.lineTo(canvasWidth, gridSpace * i);
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            drawValue(i, true);
 
-    }
+        }
 
-    for (let i = 0; i < yCount; i++) {
-        ctx.beginPath();
-        ctx.moveTo(gridSpace * i, 0);
-        ctx.lineTo(gridSpace * i, canvasHeight);
-        ctx.strokeStyle = lineColor;
-        ctx.lineWidth = 1;
-        ctx.stroke();
+        for (let i = 0; i < yCount; i++) {
+            ctx.beginPath();
+            ctx.moveTo(gridSpace * i, 0);
+            ctx.lineTo(gridSpace * i, canvasHeight);
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = 1;
+            ctx.stroke();
 
-        drawValue(i, false);
-    }
-};
+            drawValue(i, false);
+        }
+    };
 
-const drawReact = (ctx: CanvasRenderingContext2D) => {
-    ctx.fillStyle = 'blue';
-    ctx.fillRect(40, 40, 120, 80);
-}
+    const drawReact = (ctx: CanvasRenderingContext2D) => {
+        ctx.fillStyle = 'blue';
+        ctx.fillRect(40, 40, 120, 80);
+    }
 
-let canvas = createACanvas();
+    // 1. 创建 canvas
+    let canvas = createACanvas();
 
-let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-ctx.setTransform(dprValue, 0, 0, dprValue, 0, 0);
+    let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    ctx.setTransform(dprValue, 0, 0, dprValue, 0, 0);
 
-drawGrid(ctx);
+    // 2. 画网格
+    drawGrid(ctx);
 
-let parentDom = document.getElementById(parentId);
-parentDom.appendChild(canvas);
+    // 3. 把 canvas 添加到 DOM 节点中
+    let parentDom = document.getElementById(parentId);
+    parentDom.appendChild(canvas);
 
-drawReact(ctx);
+    // 4. 在画布中画一个矩形区域
+    drawReact(ctx);
 }
 
-toDraw();
+syDraw();
diff --git a/learn-canvas/2-shape.ts b/learn-canvas/2-shape.ts
@@ -0,0 +1,103 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 使用 JavaScript 创建 Canvas
+ */
+
+ function toDraw() {
+    const parentId = 'canvas-warp';
+    const canvasWidth = 400;
+    const canvasHeight = 400;
+    const gridSpace = 40;
+    const lineColor = '#cec';
+    let dprValue = window.devicePixelRatio || 1;
+
+    const createACanvas = () => {
+        let canvas = document.createElement('canvas') as HTMLCanvasElement;
+        // 设置画布的宽度
+        canvas.width = canvasWidth * dprValue;
+        // 设置画布的高度
+        canvas.height = canvasHeight * dprValue;
+        // 设置画布的 CSS 样式
+        canvas.style.width = `${canvasWidth}px`;
+        canvas.style.height = `${canvasHeight}px`;
+        canvas.style.backgroundColor = '#fff';
+        canvas.style.marginLeft = '40px';
+        canvas.style.marginTop = '40px';
+        return canvas;
+    }
+
+    // 绘制网格
+    const drawGrid = (ctx: CanvasRenderingContext2D) => {
+        let xCount = canvasHeight / gridSpace;
+        let yCount = canvasWidth / gridSpace;
+
+        const drawValue = (i, isX) => {
+            ctx.font = '12px';
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'top';
+            ctx.fillStyle = '#222';
+            if (isX) {
+                ctx.fillText(`${i * gridSpace}`, 0, gridSpace * i);
+            }
+            else {
+                ctx.fillText(`${i * gridSpace}`, gridSpace * i, 0);
+            }
+        }
+
+        for (let i = 0; i < xCount; i++) {
+            ctx.beginPath();
+            ctx.moveTo(0, gridSpace * i);
+            ctx.lineTo(canvasWidth, gridSpace * i);
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            drawValue(i, true);
+
+        }
+
+        for (let i = 0; i < yCount; i++) {
+            ctx.beginPath();
+            ctx.moveTo(gridSpace * i, 0);
+            ctx.lineTo(gridSpace * i, canvasHeight);
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+
+            drawValue(i, false);
+        }
+    };
+
+const drawReact = (ctx: CanvasRenderingContext2D) => {
+    ctx.fillStyle = '#555';
+    ctx.fillRect(80, 40, 120, 80);
+}
+
+const strokeReact = (ctx: CanvasRenderingContext2D) => {
+    ctx.strokeStyle = '#555';
+    ctx.strokeRect(80, 40, 120, 80);
+}
+
+const clearReact = (ctx: CanvasRenderingContext2D) => {
+    ctx.clearRect(120, 80, 80, 80);
+}
+
+    // 1. 创建 canvas
+    let canvas = createACanvas();
+
+    let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    ctx.setTransform(dprValue, 0, 0, dprValue, 0, 0);
+
+    // 2. 画网格
+    drawGrid(ctx);
+
+    // 3. 把 canvas 添加到 DOM 节点中
+    let parentDom = document.getElementById(parentId);
+    parentDom.appendChild(canvas);
+
+    // 4. 在画布中画一个矩形区域
+    // drawReact(ctx);
+    // strokeReact(ctx);
+    clearReact(ctx);
+}
+
+toDraw();
diff --git a/learn-canvas/index.html b/learn-canvas/index.html
@@ -14,6 +14,7 @@
 <body>
     <h1>和素燕一起学可视化</h1>
     <div id="canvas-warp"></div>
-    <script src="./1-create-canvas.ts" type="module"></script>
+    <!-- <script src="./1-create-canvas.ts" type="module"></script> -->
+    <script src="./2-shape.ts" type="module"></script>
 </body>
 </html>