memory test

EmityJ · Oct 29, 2021 · b59db6b · b59db6b
1 parent 7bc6c5d
commit b59db6b
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 10 deletions.
diff --git a/canvas/canvas-to-text/index.ts b/canvas/canvas-to-text/index.ts
@@ -3,7 +3,7 @@ const height = 80;
 let index = 0;
 
 const draw = (font, text) => {
-    let parentDom = document.getElementById('render-canvas-warp');
+    let parentDom = document.getElementById('render-canvas-wrap');
 
     let textCanvas = document.createElement('canvas');
     let ratio = window.devicePixelRatio;

diff --git a/canvas/canvas-to-text/index2.html b/canvas/canvas-to-text/index2.html
@@ -23,7 +23,7 @@
             margin: 20px;
             padding: 20px;
         }
-        #render-canvas-warp {
+        #render-canvas-wrap {
             background-color: #fff;
         }
         #muti-text-demo {
@@ -50,7 +50,7 @@
         <p class="custom-text-enable">第一集《自然的馈赠》</p>
         <p class="custom-text-disable">系列晶闸管触发器在可逆直流稳压电源的应用</p>
     </div>
-    <div id="render-canvas-warp">
+    <div id="render-canvas-wrap">
         <p>canvas 渲染</p>
     </div>
     <div id="zrender"></div>

diff --git a/learn-canvas/10-image.ts b/learn-canvas/10-image.ts
@@ -4,6 +4,7 @@
  */
 
 import { initCanvas } from './share';
+import { GridSize } from './constant';
 
 function syRunDrawRectDemo() {
     const drawImageAsPattern = (ctx: CanvasRenderingContext2D) => {
@@ -35,6 +36,19 @@ function syRunDrawRectDemo() {
         }
     }
 
+    const drawImageWithErrorSize = (ctx: CanvasRenderingContext2D) => {
+        let img = new Image();
+        img.src = 'gzh.png';
+        img.onload = function () {
+            ctx.font = '12px Times';
+            ctx.fillText(`width:${img.width}  height:${img.height}`, GridSize, GridSize - 15);
+            // ctx.drawImage(img, GridSize, GridSize, img.width, img.height);
+            const avtarWidth = 400.2;
+            const avatarX = 40;
+            ctx.drawImage(img, avatarX, avatarX, avtarWidth, avtarWidth, GridSize, GridSize, avtarWidth, avtarWidth);
+        }
+    }
+
     const drawImage = (ctx: CanvasRenderingContext2D) => {
         let img = new Image();
         img.src = 'zly.jpeg';
@@ -111,7 +125,9 @@ function syRunDrawRectDemo() {
 
     // drawImage(ctx);
 
-    drawImageCopy(ctx, 600);
+    // drawImageCopy(ctx, 600);
+
+    drawImageWithErrorSize(ctx);
 }
 
 syRunDrawRectDemo();
diff --git a/learn-canvas/18-memory-limit.ts b/learn-canvas/18-memory-limit.ts
@@ -0,0 +1,62 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description transform 的理解
+ * scale, rotate, translate (move), and skew the context
+ * https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-settransform-dev
+ */
+
+const run = function() {
+    const parentEl = document.getElementById('canvas-wrap');
+    const width = 800;
+    const height = 500;
+    const canvasCount = 500;
+    const canvasSelector = 'sy-canvas';
+
+    const createCanvas = () => {
+        for(let i = 0; i < canvasCount; i++) {
+            let canvasEl = document.createElement('canvas');
+            canvasEl.width = width;
+            canvasEl.height = height;
+            canvasEl.id = `${canvasSelector}-${i}`;
+            canvasEl.style.border = '1px solid #fff';
+            canvasEl.style.margin = '20px';
+            const draw = () => {
+                let ctx = canvasEl.getContext('2d');
+                if (!ctx) {
+                    console.error('ctx is null', i);
+                    // clearn memory
+                    let removeCount = 20;
+                    for(let j = 0; j < removeCount; j++) {
+                        let renderedCanvas = document.getElementById(`${canvasSelector}-${j}`) as HTMLCanvasElement;
+                        console.log(renderedCanvas);
+                        // let renderedCtx = renderedCanvas.getContext('2d');
+                        // renderedCtx.clearRect(0, 0, renderedCanvas.width, renderedCanvas.height);
+                        if (renderedCanvas) {
+                            renderedCanvas.parentNode.removeChild(renderedCanvas);
+                        }
+                    }
+                    let removeCanvas = document.getElementById(`${canvasSelector}-${removeCount + 2}`) as HTMLCanvasElement;
+                    if (removeCanvas) {
+                        ctx = removeCanvas.getContext('2d');
+                        console.log('after remove', ctx);
+                    }
+                    return false;
+                }
+                else {
+                    ctx.fillStyle = '#fff';
+                    ctx.font = '60px Times';
+                    ctx.fillText(`${i}`, 20, 60);
+                    return true;
+                }
+            }
+            let drawed = draw();
+            if (!drawed) {
+                break;
+            }
+            parentEl.appendChild(canvasEl);
+        }
+    }
+
+    createCanvas();
+};
+run();
diff --git a/learn-canvas/gzh.png b/learn-canvas/gzh.png
diff --git a/learn-canvas/index.html b/learn-canvas/index.html
@@ -26,7 +26,7 @@
             justify-content: center;
             flex-direction: column;
         }
-        #canvas-warp {
+        #canvas-wrap {
             position: relative;
             display: inline-block;
             margin: 0 auto;
@@ -37,9 +37,9 @@
     </style>
 </head>
 <body>
-    <canvas id="sy-canvas"></canvas>
-    <div id="canvas-warp"></div>
-    <script src="./1-create-canvas.ts" type="module"></script>
+    <!-- <canvas id="sy-canvas"></canvas> -->
+    <div id="canvas-wrap"></div>
+    <!-- <script src="./1-create-canvas.ts" type="module"></script> -->
     <!-- <script src="./2-shape-rect.ts" type="module"></script> -->
     <!-- <script src="./3-shape-path.ts" type="module"></script> -->
     <!-- <script src="./4-arcto.ts" type="module"></script> -->
@@ -56,6 +56,7 @@
     <!-- <script src="./15-transform.ts" type="module"></script> -->
     <!-- <script src="./16-sin-cos-tan.ts" type="module"></script> -->
     <!-- <script src="./17-transform2.ts" type="module"></script> -->
+    <script src="./18-memory-limit.ts" type="module"></script>
 
 </body>
 </html>
diff --git a/learn-canvas/share.ts b/learn-canvas/share.ts
@@ -26,7 +26,7 @@ export enum SYAxisPos {
 export function initCanvas(originAxis: SYAxisPos = SYAxisPos.TopLeft): CanvasRenderingContext2D {
     const pageWidth = document.documentElement.clientWidth;
     const pageHeight = document.documentElement.clientHeight;
-    const parentId = 'canvas-warp';
+    const parentId = 'canvas-wrap';
     const canvasWidth = pageWidth;
     const canvasHeight = pageHeight;
     const gridSpace = GridSize;

diff --git a/learn-canvas/vite.config.js b/learn-canvas/vite.config.js
@@ -1,4 +1,8 @@
 import {defineConfig} from 'vite';
 
 // https://vitejs.dev/config/
-export default defineConfig({});
+export default defineConfig({
+   server: {
+        host: '0.0.0.0'
+   }
+});