canvas 学习

lwg649 · Aug 9, 2021 · 18262e4 · 18262e4
1 parent 5370876
commit 18262e4
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 0 deletions.
diff --git a/canvas/canvas-to-text/.eslintrc.js b/canvas/canvas-to-text/.eslintrc.js
@@ -6,6 +6,7 @@
  */
 
 module.exports = {
+    root: true,
     extends: [
         '@ecomfe/eslint-config',
         '@ecomfe/eslint-config/typescript'

diff --git a/learn-canvas/1-create-canvas.ts b/learn-canvas/1-create-canvas.ts
@@ -0,0 +1,88 @@
+/**
+ * @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 = 'blue';
+    ctx.fillRect(40, 40, 120, 80);
+}
+
+let canvas = createACanvas();
+
+let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+ctx.setTransform(dprValue, 0, 0, dprValue, 0, 0);
+
+drawGrid(ctx);
+
+let parentDom = document.getElementById(parentId);
+parentDom.appendChild(canvas);
+
+drawReact(ctx);
+}
+
+toDraw();
diff --git a/learn-canvas/index.html b/learn-canvas/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>创建 canvas</title>
+    <style>
+        body {
+            background-color: #f5f5f5;
+        }
+    </style>
+</head>
+<body>
+    <h1>和素燕一起学可视化</h1>
+    <div id="canvas-warp"></div>
+    <script src="./1-create-canvas.ts" type="module"></script>
+</body>
+</html>
diff --git a/learn-canvas/package-lock.json b/learn-canvas/package-lock.json
diff --git a/learn-canvas/package.json b/learn-canvas/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "learn-canvas",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "vite": "^2.4.4"
+  }
+}
diff --git a/learn-canvas/vite.config.js b/learn-canvas/vite.config.js
@@ -0,0 +1,4 @@
+import {defineConfig} from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({});