都市探索マップ
「街の達人でっか字」の「全東京便利情報地図」と
「全神奈川便利情報地図」を参考に、架空鉄道を描き加えて、
HTML5canvasで、地図を作成してみた。
但し、その際、南北に長くなったので、二分割している。
東京～神奈川北部
――――― 川崎市営地下鉄
――――― メトロセブン
――――― エイトライナー
神奈川南部
お持ち帰りコーナー
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。
「街の達人でっか字」の「全東京便利情報地図」と
「全神奈川便利情報地図」を参考に、架空鉄道を描き加えて、
HTML5canvasで、地図を作成してみた。
但し、その際、南北に長くなったので、二分割している。
――――― 川崎市営地下鉄
――――― メトロセブン
――――― エイトライナー
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>都市探索マップ</title>
<script>
var canvas1, canvas2, cvs; // canvas要素のオブジェクトを取得する為の変数
var context1, context2, cnt; // コンテキストを取得する為の変数
var w = 640; // canvasの横幅（canvasタグのwidth属性と同じ数値を直接代入）
var h = 480; // canvasの高さ（canvasタグのheight属性と同じ数値を直接代入）
var hw = w / 2; // canvasの横幅の半値幅
var hh = h / 2; // canvasの高さの半値幅
var bgcolor = "#9acd32"; // canvasの背景色
window.onload = function(){
canvas1 = document.getElementById("map1"); // canvas要素のオブジェクトを取得
context1 = canvas1.getContext("2d"); // コンテキストを取得
draw1();
canvas2 = document.getElementById("map2"); // canvas要素のオブジェクトを取得
context2 = canvas2.getContext("2d"); // コンテキストを取得
draw2();
};
var draw1 = function(){
context1.fillStyle = bgcolor; // canvasの背景色で、
context1.fillRect(0, 0, w, h); // canvas全体を塗りつぶす
context1.strokeStyle = "#000000";
for(i=0;i<14;i++){
for(j=0;j<10;j++){
context1.strokeRect(i*40+40,j*40+40,40,40);
}
}
context1.fillStyle = "#000000";
context1.textBaseline = "middle";
context1.textAlign = "center";
context1.font ="7pt 'メイリオ'";
context1.fillText("八王子",100,290);
context1.fillText("みな",100,300);
context1.fillText("み野",100,310);
context1.fillText("多摩",180,290);
context1.fillText("セン",180,300);
context1.fillText("ター",180,310);
context1.fillText("港北",340,410);
context1.fillText("ニュー",340,420);
context1.fillText("タウン",340,430);
context1.font ="8pt 'メイリオ'";
context1.fillText("高尾駅",60,260);
context1.fillText("城山",60,340);
context1.fillText("八王子",100,220);
context1.fillText("片倉",100,260);
context1.fillText("橋本",100,340);
context1.fillText("南橋本",100,380);
context1.fillText("昭島",140,140);
context1.fillText("豊田",140,220);
context1.fillText("長沼",140,260);
context1.fillText("南大沢",140,300);
context1.fillText("多摩境",140,340);
context1.fillText("相模原",140,380);
context1.fillText("上溝",140,420);
context1.fillText("立川",180,140);
context1.fillText("日野橋",180,180);
context1.fillText("高幡",180,212);
context1.fillText("不動",180,228);
context1.fillText("中央",180,252);
context1.fillText("大学",180,268);
context1.fillText("小山田",180,332);
context1.fillText("緑地",180,348);
context1.fillText("忠生",180,380);
context1.fillText("古淵",180,420);
context1.fillText("谷保",220,180);
context1.fillText("分倍",220,212);
context1.fillText("河原",220,228);
context1.fillText("聖蹟",220,252);
context1.fillText("桜ヶ丘",220,268);
context1.fillText("若葉台",220,300);
context1.fillText("鶴川",220,332);
context1.fillText("団地",220,348);
context1.fillText("金井",220,380);
context1.fillText("町田",220,420);
context1.fillText("府中",260,220);
context1.fillText("稲城",260,260);
context1.fillText("坂浜",260,300);
context1.fillText("新百合",260,332);
context1.fillText("ヶ丘",260,348);
context1.fillText("三輪",260,380);
context1.fillText("青葉台",260,420);
context1.fillText("武蔵境",300,140);
context1.fillText("野川",300,172);
context1.fillText("公園",300,188);
context1.fillText("深大寺",300,220);
context1.fillText("調布",300,260);
context1.fillText("生田",300,300);
context1.fillText("長沢",300,340);
context1.fillText("あざ",300,372);
context1.fillText("み野",300,388);
context1.fillText("市が尾",300,420);
context1.fillText("吉祥寺",340,140);
context1.fillText("三鷹台",340,180);
context1.fillText("つつじ",340,212);
context1.fillText("ヶ丘",340,228);
context1.fillText("成城",340,260);
context1.fillText("登戸",340,300);
context1.fillText("宮崎台",340,340);
context1.fillText("鷺沼",340,380);
context1.fillText("光が丘",380,60);
context1.fillText("井草",380,100);
context1.fillText("荻窪",380,140);
context1.fillText("高井戸",380,180);
context1.fillText("桜上水",380,220);
context1.fillText("千歳",380,252);
context1.fillText("船橋",380,268);
context1.fillText("二子",380,292);
context1.fillText("玉川",380,308);
context1.fillText("溝の口",380,340);
context1.fillText("武蔵",380,372);
context1.fillText("中原",380,388);
context1.fillText("高田",380,420);
context1.fillText("練馬",420,100);
context1.fillText("中野",420,140);
context1.fillText("方南町",420,180);
context1.fillText("下北沢",420,220);
context1.fillText("三軒",420,252);
context1.fillText("茶屋",420,268);
context1.fillText("駒沢",420,292);
context1.fillText("公園",420,308);
context1.fillText("田園",420,332);
context1.fillText("調布",420,348);
context1.fillText("武蔵",420,372);
context1.fillText("小杉",420,388);
context1.fillText("新川崎",420,420);
context1.fillText("池袋",460,100);
context1.fillText("高田",460,132);
context1.fillText("馬場",460,148);
context1.fillText("新宿",460,180);
context1.fillText("渋谷",460,220);
context1.fillText("恵比寿",460,260);
context1.fillText("戸越",460,300);
context1.fillText("馬込",460,340);
context1.fillText("池上",460,380);
context1.fillText("蒲田",460,420);
context1.fillText("後楽園",500,140);
context1.fillText("皇居",500,180);
context1.fillText("新橋",500,220);
context1.fillText("田町",500,260);
context1.fillText("品川",500,300);
context1.fillText("大井",500,332);
context1.fillText("競馬場",500,348);
context1.fillText("平和島",500,380);
context1.fillText("穴守",500,412);
context1.fillText("稲荷",500,428);
context1.fillText("上野",540,140);
context1.fillText("日本橋",540,180);
/* 川崎市営地下鉄 */
context1.strokeStyle = "#00ffff";
context1.beginPath();
context1.moveTo(440,440);
context1.lineTo(420,420);
context1.lineTo(420,380);
context1.lineTo(340,380);
context1.lineTo(340,340);
context1.lineTo(260,340);
context1.lineTo(220,300);
context1.lineTo(180,300);
context1.lineTo(180,340);
context1.lineTo(140,380);
context1.lineTo(140,440);
context1.stroke();
/* メトロセブン */
context1.strokeStyle = "#0000ff";
context1.beginPath();
context1.moveTo(420,100);
context1.lineTo(420,260);
context1.lineTo(460,340);
context1.lineTo(500,380);
context1.stroke();
/* エイトライナー */
context1.strokeStyle = "#008000";
context1.beginPath();
context1.moveTo(380,100);
context1.lineTo(380,300);
context1.lineTo(420,340);
context1.lineTo(460,420);
context1.lineTo(500,420);
context1.stroke();
};
var draw2 = function(){
context2.fillStyle = bgcolor; // canvasの背景色で、
context2.fillRect(0, 0, w, h); // canvas全体を塗りつぶす
context2.strokeStyle = "#000000";
for(i=0;i<14;i++){
for(j=0;j<10;j++){
context2.strokeRect(i*40+40,j*40+40,40,40);
}
}
context2.fillStyle = "#000000";
context2.textBaseline = "middle";
context2.textAlign = "center";
context2.font ="8pt 'メイリオ'";
context2.fillText("伊勢原",100,300);
context2.fillText("相武",140,132);
context2.fillText("台下",140,148);
context2.fillText("妻田",140,180);
context2.fillText("本厚木",140,220);
context2.fillText("麻溝台",180,60);
context2.fillText("相武台",180,100);
context2.fillText("座間",180,140);
context2.fillText("相模",220,52);
context2.fillText("大野",220,68);
context2.fillText("中央",220,92);
context2.fillText("林間",220,108);
context2.fillText("六会",220,340);
context2.fillText("長津田",260,60);
context2.fillText("藤沢",260,420);
context2.fillText("川和",300,60);
context2.fillText("中山",300,100);
context2.fillText("不動坂",300,260);
context2.fillText("大船",300,380);
context2.fillText("鴨居",340,100);
context2.fillText("綱島",380,60);
context2.fillText("新横浜",380,100);
context2.fillText("東神",380,132);
context2.fillText("奈川",380,148);
context2.fillText("横浜",380,180);
context2.fillText("三ツ池",420,52);
context2.fillText("公園",420,68);
context2.fillText("鶴見",420,100);
context2.fillText("川崎",460,60);
context2.fillText("浜川崎",460,100);
context2.fillText("川崎",500,52);
context2.fillText("大師",500,68);
context2.strokeStyle = "#00ffff";
context2.beginPath();
context2.moveTo(440,40);
context2.lineTo(460,60);
context2.moveTo(140,40);
context2.lineTo(140,220);
context2.stroke();
};
// PNG画像として保存する関数
var saveasPNG = function(){
var png = canvas1.toDataURL("image/png");
document.getElementById("newImg").src = png;
};
</script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>都市探索マップ</h1>
<h2>東京～神奈川北部</h2>
<p>
<canvas id="map1" width="640" height="480"></canvas><br>
<input type="button" value="PNG画像を保存する" onclick="saveasPNG()">
</p>
<p>
<span style="color:#00ffff;">―――――</span> 川崎市営地下鉄<br>
<span style="color:#0000ff;">―――――</span> メトロセブン<br>
<span style="color:#008000;">―――――</span> エイトライナー
</p>
<h2>神奈川南部</h2>
<p>
<canvas id="map2" width="640" height="480"></canvas><br>
</p>
<br><hr><br>
<h2>お持ち帰りコーナー</h2>
<p>
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。
</p>
<div><img id="newImg"></div>
</div>
</body>
</html>
|