这是一个奇怪的问题,但是我有一张由画布代码行生成的世界地图。
画布代码源自网站自动转换的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);
最佳答案
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").....