これは少し奇妙な問題ですが、キャンバス コードの行から作成された世界地図があります。
キャンバス コードは、Web サイトによって自動的に変換された SVG ファイルから派生したものですが、47000 行のコードと 1.5 MB のファイル サイズが生成されました。
これは明らかに読み込みに時間がかかり、表示されないこともあります (現在、リモートで読み込まれた .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);