npm - jmgraph - Versions diffs - 3.2.16 → 3.2.18 - Mend

jmgraph 3.2.16 → 3.2.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/LICENSE +21 -21
package/README.md +251 -428
package/build/gulpfile.js +142 -142
package/build/package-lock.json +10666 -0
package/build/package.json +71 -71
package/dev.js +9 -9
package/dist/jmgraph.core.min.js +1 -1
package/dist/jmgraph.core.min.js.map +1 -1
package/dist/jmgraph.js +3500 -2668
package/dist/jmgraph.min.js +1 -1
package/example/ball.html +216 -216
package/example/base.html +111 -111
package/example/canvas.html +53 -53
package/example/cell.html +283 -283
package/example/controls/arc.html +128 -128
package/example/controls/arrowline.html +77 -77
package/example/controls/bezier.html +298 -298
package/example/controls/img.html +96 -96
package/example/controls/label.html +86 -86
package/example/controls/line.html +172 -172
package/example/controls/prismatic.html +62 -62
package/example/controls/rect.html +63 -63
package/example/controls/resize.html +111 -111
package/example/controls/test.html +359 -359
package/example/es.html +69 -69
package/example/es5module.html +62 -63
package/example/heartarc.html +115 -115
package/example/index.html +46 -46
package/example/js/require.js +4 -4
package/example/love/img/bling/bling.tps +265 -265
package/example/love/img/bling.json +87 -87
package/example/love/img/bling.tps +295 -295
package/example/love/img/love.json +95 -95
package/example/love/img/love.tps +315 -315
package/example/love/img/qq/qq.tps +399 -399
package/example/love/img/qq.json +242 -242
package/example/love/index.html +40 -40
package/example/love/js/game.js +558 -558
package/example/music.html +210 -210
package/example/node/test.js +137 -137
package/example/pdf.html +186 -186
package/example/progress.html +172 -172
package/example/pso.html +147 -147
package/example/sort.html +804 -815
package/example/tweenjs.html +83 -83
package/example/webgl.html +278 -278
package/example/xfj/index.html +331 -331
package/example/xfj/shake.js +48 -48
package/example/xfj/testori.html +75 -75
package/index.js +99 -99
package/package.json +58 -56
package/src/core/jmControl.js +1376 -1531
package/src/core/jmEvents.js +240 -281
package/src/core/jmGradient.js +231 -231
package/src/core/jmGraph.js +569 -569
package/src/core/jmList.js +92 -157
package/src/core/jmObject.js +83 -103
package/src/core/jmPath.js +35 -35
package/src/core/jmProperty.js +71 -110
package/src/core/jmShadow.js +65 -65
package/src/core/jmUtils.js +906 -919
package/src/lib/earcut.js +680 -680
package/src/lib/earcut.md +73 -73
package/src/lib/webgl/base.js +522 -452
package/src/lib/webgl/core/buffer.js +48 -48
package/src/lib/webgl/core/mapSize.js +40 -40
package/src/lib/webgl/core/mapType.js +43 -43
package/src/lib/webgl/core/program.js +138 -138
package/src/lib/webgl/core/shader.js +13 -13
package/src/lib/webgl/core/texture.js +60 -60
package/src/lib/webgl/gradient.js +168 -168
package/src/lib/webgl/index.js +137 -11
package/src/lib/webgl/path.js +568 -561
package/src/shapes/jmArrowLine.js +36 -36
package/src/shapes/jmImage.js +244 -244
package/src/shapes/jmLabel.js +271 -271
package/src/shapes/jmResize.js +332 -330

package/example/webgl.html CHANGED Viewed

@@ -1,278 +1,278 @@
-  <body>
-    <canvas id="cvs" width="600" height="600" style="border: dashed 1px red">
-      你的浏览器不支持画布元素
-    </canvas>
-    <canvas id="cvs2d" width="600" height="600" style="border: dashed 1px red">
-        你的浏览器不支持画布元素
-      </canvas>
-    <script type="module">
-        import {
-            createProgram,
-            writeVertexAttrib
-        } from '../src/lib/webgl/core/program.js';
-        import {
-            createFloat32Buffer,
-            createUint16Buffer,
-            deleteBuffer,
-        } from '../src/lib/webgl/core/buffer.js';
-        import {
-            create2DTexture
-        } from '../src/lib/webgl/core/texture.js';
-      //获取画布元素
-      var cvs = document.getElementById('cvs');
-      //获取到元素的上下文环境对象
-      var gl = cvs.getContext('webgl');
-        const width = gl.canvas.width;
-        const height = gl.canvas.height;
-        gl.viewport(0, 0, width, height)
-        // 设置 webgl 视口，将 -1 到 1 映射为 canvas 上的坐标
-        const program = createProgram(gl, `
-        attribute vec4 a_position;
-        attribute vec2 aPointIndex;
-        attribute vec4 aColor;
-        attribute vec2 aTextCoord;
-        uniform vec2 aCenterPoint;
-        uniform vec2 aLineStart;
-        uniform vec2 aLineEnd;
-        uniform float aTotalPointCount;
-        varying vec4 vColor;
-        varying  vec2 vTextCoord;
-        vec4 translatePosition(in vec4 point, float x, float y) {
-            point.x = (point.x-x)/x;
-            point.y = (y-point.y)/y;
-            return point;
-        }
-        vec4 pointToPos(vec2 start, vec2 end, float index) {
-            float len = sqrt(pow(end.x - start.x, 2.0) + pow(end.y - start.y, 2.0));
-            float x = start.x + (end.x - start.x)/10.0 * index;
-            float y = start.y + (end.y - start.y)/10.0 * index;
-            return vec4(x, y, 0.0, 0.0);
-        }
-        vec4 ceilPosition(vec4 pos) {
-            return vec4(pos.xy/10000.0, pos.zw);
-        }
-        void main() {
-            gl_PointSize = 10.0;
-            //vec4 pos = pointToPos(aLineStart, aLineEnd, aPointIndex.x);
-            vec4 pos = ceilPosition(a_position);//translatePosition(a_position, aCenterPoint.x, aCenterPoint.y);
-            gl_Position = pos;
-            vColor = aColor;
-            vTextCoord = aTextCoord;
-        }
-        `,`
-        precision highp float;
-        uniform vec4 u_color;
-        uniform sampler2D uSample;
-        varying vec4 vColor;
-        varying  vec2 vTextCoord;
-        void main() {
-            //float r = distance(gl_PointCoord, vec2(0.5, 0.5));
-            //根据距离设置片元
-            //if(r <= 0.5){
-                // 方形区域片元距离几何中心半径小于0.5，像素颜色设置红色
-                gl_FragColor = u_color;
-            //}else {
-                // 方形区域距离几何中心半径不小于0.5的片元剪裁舍弃掉：
-             //  discard;
-            //}
-            //gl_FragColor = u_color;
-        }
-        `);
-       //texture2D(uSample, vTextCoord)
-       const colors = [Math.random(),Math.random(),Math.random(),1];
-       let points = [6667, 0, 5851, 3196, 3602, 5610, 472, 5555, 680];
-       const uvpoints = [];
-        const center = {
-            x: width / 2,
-            y: height / 2
-        };
-        let colorStop = [Math.random(),Math.random(),Math.random(),1];
-       for(let r=0; r<=Math.PI*2;r += 0.5) {
-            const cos = Math.cos(r);
-            const sin = Math.sin(r);
-            const x = (cos * 200) + center.x;
-            const y = (sin * 200) + center.y;
-			//points.push(Number(((cos * 200)/center.x).toFixed(4)), Number(((sin * 200) / center.y).toFixed(4)));
-            let ux = (cos + 1)/2;
-            //if(ux < 0.5) ux = ux/2;
-            let uy = (sin + 1) / 2;
-            //if(uy < 0.5) uy = uy/2;
-            uvpoints.push(ux, uy);
-            colors.push(...colorStop);
-		}
-        //points.push(points[0], points[1]);
-        //uvpoints.push(uvpoints[0], uvpoints[1]);
-        //colors.push(...colorStop);
-/*
-        colorStop = [Math.random(),Math.random(),Math.random(),1];
-        const lastLen = points.length;
-       for(let r=0; r<=Math.PI*2;r += 0.1) {
-			points.push((Math.cos(r) * 200) / center.x, (Math.sin(r) * 200) / center.y);
-            colors.push(...colorStop);
-		}
-        points.push(points[lastLen], points[lastLen+1]);
-        colors.push(...colorStop);*/
-        if(program.uniforms.u_color) {
-        //const colorLocation = gl.getUniformLocation(program.program, 'u_color') // 获取 u_color 变量位置
-            gl.uniform4f(program.uniforms.u_color.location, 0.0, 1.0, 0.0, 1) // 设置它的值
-        }
-        if(program.uniforms.aLineEnd) {
-            gl.uniform2f(program.uniforms.aLineEnd.location, 100.0, 50.0) // 设置它的值
-        }
-        if(program.uniforms.aLineStart) {
-            gl.uniform2f(program.uniforms.aLineStart.location, 305.0, 500.0) // 设置它的值
-        }
-        if(program.uniforms.aTotalPointCount) {
-            gl.uniform1f(program.uniforms.aTotalPointCount.location, 100); // 设置它的值
-        }
-        if(program.uniforms.aCenterPoint) {
-            gl.uniform2f(program.uniforms.aCenterPoint.location, center.x, center.y); // 设置它的值
-        }
-        //先创建一个缓存对象
-        if(program.attrs.a_position) {
-            var vertexBuffer = createFloat32Buffer(gl, points);
-            writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
-            //deleteBuffer(gl, vertexBuffer);
-        }
-      if(program.attrs.aPointIndex) {
-            const pointIndexs = [];
-            for(let i=0;i<100;i++) {
-                pointIndexs.push(i);
-            }
-            var pointIndexBuffer = createFloat32Buffer(gl, pointIndexs);
-            writeVertexAttrib(gl, pointIndexBuffer, program.attrs.aPointIndex, 1, 0, 0);
-        }
-         //先创建一个缓存对象
-        var colorBuffer = createFloat32Buffer(gl, colors);
-        writeVertexAttrib(gl, colorBuffer, program.attrs.aColor, 4, 4, 0);
-        //deleteBuffer(gl, colorBuffer);
-        //const aTextCoord = gl.getAttribLocation(program, 'aTextCoord');
-        //const uSample = gl.getUniformLocation(program, 'uSample');
-        //先创建一个缓存对象
-        //var textCoordBuffer = createFloat32Buffer(gl, uvpoints);
-        //writeVertexAttrib(gl, textCoordBuffer, program.attrs.aTextCoord, 2, 2, 0);
-        // 纹理
-      /*var img = new Image();
-      img.onload = function(){
-        draw();
-      };
-      img.src = 'qrcode.jpg';*/
-      //points =  [-0.8, 0.5, 0, 0.5,0.6,0,0,-0.6, -0.5];
-      draw();
-      function draw() {
-        /*var texture = create2DTexture(gl, img);
-        if(program.uniforms.uSample) {
-            gl.uniform1i(program.uniforms.uSample.location, 0) // 纹理单元传递给着色器
-        }*/
-        gl.clearColor(1, 1, 1, 1) // 设置清空颜色缓冲时的颜色值
-        gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓冲区，也就是清空画布
-        if(program.uniforms.u_color) {
-            gl.uniform4f(program.uniforms.u_color.location, Math.random(), Math.random(), Math.random(), 1) // 设置它的值
-        }
-        vertexBuffer = createFloat32Buffer(gl, points);
-        writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
-        /*gl.drawArrays( // 从数组中绘制图元
-            gl.TRIANGLES, // 渲染三角形
-            0,  // 从数组中哪个点开始渲染
-            3   // 需要用到多少个点，三角形的三个顶点
-        );
-        gl.drawArrays( // 从数组中绘制图元
-            gl.TRIANGLES, // 渲染三角形
-            3,  // 从数组中哪个点开始渲染
-            3   // 需要用到多少个点，三角形的三个顶点
-        );*/
-        //gl.drawArrays(gl.TRIANGLE, 0, points.length/2);
-        gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
-        //gl.drawArrays(gl.TRIANGLE_STRIP, 0, points.length/2);
-        //gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
-        //gl.drawArrays(gl.LINE_LOOP, 0, points.length/2);
-        //gl.drawArrays(gl.POINTS, 0, points.length/2);
-        //gl.drawArrays(gl.LINES, 0, points.length/2);
-        //deleteBuffer(gl, vertexBuffer);
-        //deleteBuffer(gl, colorBuffer);
-        //deleteBuffer(gl, textCoordBuffer);
-        //console.log(1,vertexBuffer);
-        if(program.uniforms.u_color) {
-            gl.uniform4f(program.uniforms.u_color.location, Math.random(), Math.random(), Math.random(), 1) // 设置它的值
-        }
-        //setTimeout(() => {
-            vertexBuffer = createFloat32Buffer(gl, points);
-            console.log(0, vertexBuffer);
-            writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
-            console.log(5, vertexBuffer.buffer);
-            gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
-            deleteBuffer(gl, vertexBuffer);
-        //}, 2000);
-        draw2d(points);
-        //setTimeout(draw, 1000)
-      }
-      function draw2d(points) {
-        var cvs = document.getElementById("cvs2d");
-        var ctx = cvs.getContext("2d");
-        ctx.strokeStyle = "rgba(0, 255, 0, 1)";
-        ctx.beginPath();
-        ctx.moveTo(points[0]/10000 * center.x + center.x, center.y - points[1]/10000 * center.y);
-        for(let i=2;i<points.length;i+=2) {
-            ctx.lineTo(points[i]/10000 * center.x + center.x, center.y - points[i+1]/10000 * center.y);
-        }
-        ctx.lineTo(points[0]/10000 * center.x + center.x, center.y - points[1]/10000 * center.y);
-        ctx.stroke();
-        ctx.closePath();
-      }
-    </script>
-  </body>
+  <body>
+    <canvas id="cvs" width="600" height="600" style="border: dashed 1px red">
+      你的浏览器不支持画布元素
+    </canvas>
+    <canvas id="cvs2d" width="600" height="600" style="border: dashed 1px red">
+        你的浏览器不支持画布元素
+      </canvas>
+    <script type="module">
+        import {
+            createProgram,
+            writeVertexAttrib
+        } from '../src/lib/webgl/core/program.js';
+        import {
+            createFloat32Buffer,
+            createUint16Buffer,
+            deleteBuffer,
+        } from '../src/lib/webgl/core/buffer.js';
+        import {
+            create2DTexture
+        } from '../src/lib/webgl/core/texture.js';
+      //获取画布元素
+      var cvs = document.getElementById('cvs');
+      //获取到元素的上下文环境对象
+      var gl = cvs.getContext('webgl');
+        const width = gl.canvas.width;
+        const height = gl.canvas.height;
+        gl.viewport(0, 0, width, height)
+        // 设置 webgl 视口，将 -1 到 1 映射为 canvas 上的坐标
+        const program = createProgram(gl, `
+        attribute vec4 a_position;
+        attribute vec2 aPointIndex;
+        attribute vec4 aColor;
+        attribute vec2 aTextCoord;
+        uniform vec2 aCenterPoint;
+        uniform vec2 aLineStart;
+        uniform vec2 aLineEnd;
+        uniform float aTotalPointCount;
+        varying vec4 vColor;
+        varying  vec2 vTextCoord;
+        vec4 translatePosition(in vec4 point, float x, float y) {
+            point.x = (point.x-x)/x;
+            point.y = (y-point.y)/y;
+            return point;
+        }
+        vec4 pointToPos(vec2 start, vec2 end, float index) {
+            float len = sqrt(pow(end.x - start.x, 2.0) + pow(end.y - start.y, 2.0));
+            float x = start.x + (end.x - start.x)/10.0 * index;
+            float y = start.y + (end.y - start.y)/10.0 * index;
+            return vec4(x, y, 0.0, 0.0);
+        }
+        vec4 ceilPosition(vec4 pos) {
+            return vec4(pos.xy/10000.0, pos.zw);
+        }
+        void main() {
+            gl_PointSize = 10.0;
+            //vec4 pos = pointToPos(aLineStart, aLineEnd, aPointIndex.x);
+            vec4 pos = ceilPosition(a_position);//translatePosition(a_position, aCenterPoint.x, aCenterPoint.y);
+            gl_Position = pos;
+            vColor = aColor;
+            vTextCoord = aTextCoord;
+        }
+        `,`
+        precision highp float;
+        uniform vec4 u_color;
+        uniform sampler2D uSample;
+        varying vec4 vColor;
+        varying  vec2 vTextCoord;
+        void main() {
+            //float r = distance(gl_PointCoord, vec2(0.5, 0.5));
+            //根据距离设置片元
+            //if(r <= 0.5){
+                // 方形区域片元距离几何中心半径小于0.5，像素颜色设置红色
+                gl_FragColor = u_color;
+            //}else {
+                // 方形区域距离几何中心半径不小于0.5的片元剪裁舍弃掉：
+             //  discard;
+            //}
+            //gl_FragColor = u_color;
+        }
+        `);
+       //texture2D(uSample, vTextCoord)
+       const colors = [Math.random(),Math.random(),Math.random(),1];
+       let points = [6667, 0, 5851, 3196, 3602, 5610, 472, 5555, 680];
+       const uvpoints = [];
+        const center = {
+            x: width / 2,
+            y: height / 2
+        };
+        let colorStop = [Math.random(),Math.random(),Math.random(),1];
+       for(let r=0; r<=Math.PI*2;r += 0.5) {
+            const cos = Math.cos(r);
+            const sin = Math.sin(r);
+            const x = (cos * 200) + center.x;
+            const y = (sin * 200) + center.y;
+			//points.push(Number(((cos * 200)/center.x).toFixed(4)), Number(((sin * 200) / center.y).toFixed(4)));
+            let ux = (cos + 1)/2;
+            //if(ux < 0.5) ux = ux/2;
+            let uy = (sin + 1) / 2;
+            //if(uy < 0.5) uy = uy/2;
+            uvpoints.push(ux, uy);
+            colors.push(...colorStop);
+		}
+        //points.push(points[0], points[1]);
+        //uvpoints.push(uvpoints[0], uvpoints[1]);
+        //colors.push(...colorStop);
+/*
+        colorStop = [Math.random(),Math.random(),Math.random(),1];
+        const lastLen = points.length;
+       for(let r=0; r<=Math.PI*2;r += 0.1) {
+			points.push((Math.cos(r) * 200) / center.x, (Math.sin(r) * 200) / center.y);
+            colors.push(...colorStop);
+		}
+        points.push(points[lastLen], points[lastLen+1]);
+        colors.push(...colorStop);*/
+        if(program.uniforms.u_color) {
+        //const colorLocation = gl.getUniformLocation(program.program, 'u_color') // 获取 u_color 变量位置
+            gl.uniform4f(program.uniforms.u_color.location, 0.0, 1.0, 0.0, 1) // 设置它的值
+        }
+        if(program.uniforms.aLineEnd) {
+            gl.uniform2f(program.uniforms.aLineEnd.location, 100.0, 50.0) // 设置它的值
+        }
+        if(program.uniforms.aLineStart) {
+            gl.uniform2f(program.uniforms.aLineStart.location, 305.0, 500.0) // 设置它的值
+        }
+        if(program.uniforms.aTotalPointCount) {
+            gl.uniform1f(program.uniforms.aTotalPointCount.location, 100); // 设置它的值
+        }
+        if(program.uniforms.aCenterPoint) {
+            gl.uniform2f(program.uniforms.aCenterPoint.location, center.x, center.y); // 设置它的值
+        }
+        //先创建一个缓存对象
+        if(program.attrs.a_position) {
+            var vertexBuffer = createFloat32Buffer(gl, points);
+            writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
+            //deleteBuffer(gl, vertexBuffer);
+        }
+      if(program.attrs.aPointIndex) {
+            const pointIndexs = [];
+            for(let i=0;i<100;i++) {
+                pointIndexs.push(i);
+            }
+            var pointIndexBuffer = createFloat32Buffer(gl, pointIndexs);
+            writeVertexAttrib(gl, pointIndexBuffer, program.attrs.aPointIndex, 1, 0, 0);
+        }
+         //先创建一个缓存对象
+        var colorBuffer = createFloat32Buffer(gl, colors);
+        writeVertexAttrib(gl, colorBuffer, program.attrs.aColor, 4, 4, 0);
+        //deleteBuffer(gl, colorBuffer);
+        //const aTextCoord = gl.getAttribLocation(program, 'aTextCoord');
+        //const uSample = gl.getUniformLocation(program, 'uSample');
+        //先创建一个缓存对象
+        //var textCoordBuffer = createFloat32Buffer(gl, uvpoints);
+        //writeVertexAttrib(gl, textCoordBuffer, program.attrs.aTextCoord, 2, 2, 0);
+        // 纹理
+      /*var img = new Image();
+      img.onload = function(){
+        draw();
+      };
+      img.src = 'qrcode.jpg';*/
+      //points =  [-0.8, 0.5, 0, 0.5,0.6,0,0,-0.6, -0.5];
+      draw();
+      function draw() {
+        /*var texture = create2DTexture(gl, img);
+        if(program.uniforms.uSample) {
+            gl.uniform1i(program.uniforms.uSample.location, 0) // 纹理单元传递给着色器
+        }*/
+        gl.clearColor(1, 1, 1, 1) // 设置清空颜色缓冲时的颜色值
+        gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓冲区，也就是清空画布
+        if(program.uniforms.u_color) {
+            gl.uniform4f(program.uniforms.u_color.location, Math.random(), Math.random(), Math.random(), 1) // 设置它的值
+        }
+        vertexBuffer = createFloat32Buffer(gl, points);
+        writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
+        /*gl.drawArrays( // 从数组中绘制图元
+            gl.TRIANGLES, // 渲染三角形
+            0,  // 从数组中哪个点开始渲染
+            3   // 需要用到多少个点，三角形的三个顶点
+        );
+        gl.drawArrays( // 从数组中绘制图元
+            gl.TRIANGLES, // 渲染三角形
+            3,  // 从数组中哪个点开始渲染
+            3   // 需要用到多少个点，三角形的三个顶点
+        );*/
+        //gl.drawArrays(gl.TRIANGLE, 0, points.length/2);
+        gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
+        //gl.drawArrays(gl.TRIANGLE_STRIP, 0, points.length/2);
+        //gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
+        //gl.drawArrays(gl.LINE_LOOP, 0, points.length/2);
+        //gl.drawArrays(gl.POINTS, 0, points.length/2);
+        //gl.drawArrays(gl.LINES, 0, points.length/2);
+        //deleteBuffer(gl, vertexBuffer);
+        //deleteBuffer(gl, colorBuffer);
+        //deleteBuffer(gl, textCoordBuffer);
+        //console.log(1,vertexBuffer);
+        if(program.uniforms.u_color) {
+            gl.uniform4f(program.uniforms.u_color.location, Math.random(), Math.random(), Math.random(), 1) // 设置它的值
+        }
+        //setTimeout(() => {
+            vertexBuffer = createFloat32Buffer(gl, points);
+            console.log(0, vertexBuffer);
+            writeVertexAttrib(gl, vertexBuffer, program.attrs.a_position, 2, 0, 0);
+            console.log(5, vertexBuffer.buffer);
+            gl.drawArrays(gl.LINE_STRIP, 0, points.length/2);
+            deleteBuffer(gl, vertexBuffer);
+        //}, 2000);
+        draw2d(points);
+        //setTimeout(draw, 1000)
+      }
+      function draw2d(points) {
+        var cvs = document.getElementById("cvs2d");
+        var ctx = cvs.getContext("2d");
+        ctx.strokeStyle = "rgba(0, 255, 0, 1)";
+        ctx.beginPath();
+        ctx.moveTo(points[0]/10000 * center.x + center.x, center.y - points[1]/10000 * center.y);
+        for(let i=2;i<points.length;i+=2) {
+            ctx.lineTo(points[i]/10000 * center.x + center.x, center.y - points[i+1]/10000 * center.y);
+        }
+        ctx.lineTo(points[0]/10000 * center.x + center.x, center.y - points[1]/10000 * center.y);
+        ctx.stroke();
+        ctx.closePath();
+      }
+    </script>
+  </body>