Javascript 有没有办法简化画布代码

这是一个有点奇怪的问题，但我有一个世界地图，它是由画布代码行生成的

canvas代码来自一个由网站自动转换的SVG文件，但它产生了47000行代码&文件大小为1.5mb

这显然需要一些时间来加载，有时它不会出现（它当前驻留在远程加载的.js文件中）

是否有办法简化此代码以减少文件大小

我曾经考虑过将所有的线坐标转换成一个sql表，并以这种方式生成它，但我不确定这是否会更好

示例代码：

function world(scale) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.scale(scale,scale);

ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(39960,0);
ctx.lineTo(39960,19980);
ctx.lineTo(0,19980);
ctx.closePath();
ctx.clip();
ctx.strokeStyle = "#ffffff";
ctx.lineCap = "butt";
ctx.lineJoin = "miter";
ctx.miterLimit = 4;
ctx.save();
ctx.restore();
ctx.save();
ctx.restore();
ctx.save();

ctx.save();
ctx.fillStyle = "#bcbcbc";
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 5.5;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.miterLimit = 4;

ctx.beginPath();
ctx.moveTo(14553,0);
ctx.lineTo(14528,2);
ctx.lineTo(14502,2);
ctx.lineTo(14476,2);
ctx.lineTo(14448,4);
ctx.lineTo(14464,17);
ctx.lineTo(14436,15);
ctx.lineTo(14413,11);
ctx.lineTo(14395,4);

---

你试过缩小这个文件吗？你能发布一个画布代码文件的小例子吗？您提到您的文件是几行画布代码。通常，地图表示为一系列线。如果您的文件实际上包含context.lineTo（100100）命令，那么您当然可以删除除实际数据（100100）之外的所有数据，并且您的文件大小将减半。你可以在客户端用JS对完整的命令进行重新水化。也许压缩文件是一种快速、肮脏、高效的方式……我添加了一个例子——当然，仅仅使用坐标可能会有所不同。缩小后的代码仍然是960kb

        function CanvasProxy(target){

    var Host=new Object;

    for (var v in target)
        switch (typeof target[v]) {
        case "function":Host[v]=addMethod.bind(v);break;
        case "number":setProperty(v);break;
        case "string":setProperty(v);break;
        case "object":Host[v]=target[v];break;
        default:setSimpleProperty(v)
        };

    return Host;

    function addMethod(){
        var ret=target[this].apply(target,arguments);
        if (typeof ret==="undefined") return Host;
        Host[this]=target[this];
        return ret;
    }

    function setProperty(p){
        function property(v){target[p]=v;return Host;}
        property.toString=property.valueOf=function(){return target[p]}
        Object.defineProperty(Host, p , {get : function(){return property}, set : function(v){ target[p] = v}});
    }

    function setSimpleProperty(p){
        Object.defineProperty(Host, p , {get : function(){return target[p]}, set : function(v){ target[p] = v}});
    }

    }

var ctx;
function _init(){
var canvas = document.getElementById("myCanvas");
ctx = CanvasProxy(canvas.getContext("2d"));
}

function world(scale) {

ctx.scale(scale,scale)
.save()
.beginPath()
.moveTo(0,0)
.lineTo(39960,0)
.lineTo(39960,19980)
.lineTo(0,19980)
.closePath()
.clip()
.strokeStyle("#ffffff")
.lineCap("butt")
.lineJoin("miter")
.miterLimit(4)
.save().restore().save().restore().save().save().fillStyle("#bcbcbc").....