前提・実現したいこと
【javascript】で作成しています。
canvas内でクリックされた座標の値を、
メモ帳/Excel等何でもよいのでデータベースとして保存していきたいです。
最終的にはそのデータを引き出して、まとめてcanvas上に表示することです。
発生している問題・エラーメッセージ
そもそも駆け出し初心者のため他ファイルへのデータ蓄積方法がわかりません。
初歩的な質問でしたらすみません...
該当のソースコード
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset=Shift_JIS> 6 <link rel="stylesheet" href="Sample.css"> 7 <title>現在地の取得と表示</title> 8 <script type="text/javascript"> 9 <!-- 10 var i = 0; 11 var cnt; 12 var isDraw=false; 13 14 function init(){ 15 /*Canvas描画のテンプレ*/ 16 var c = document.getElementById("canvas"); 17 cnt = c.getContext("2d"); 18 19 /*タイマーの初期化と設定*/ 20 window.setInterval("getGeoLocation()",3000); 21 22 /*クリック位置の指定*/ 23 c.addEventListener("click",draw,false); 24 } 25 26 function showMap(position) { 27 /*現在地の取得、表示*/ 28 var coords = position.coords; 29 var x=coords.longitude; 30 var y=coords.latitude; 31 gps.innerHTML= i + " 回目の取得, 経度: " + x + "度, 緯度:"+ y +"度"; 32 33 /*現在地情報の座標化*/ 34 var lx = (x-130.43816002511197)/0.00451095458519*500; 35 var ly = (y-33.69516398003343)/0.000959185543116*500; 36 coo.innerHTML= i + " 回目の取得, x座標(経): " + lx + ", y座標(緯):"+ ly ; 37 38 /*現在地を描く*/ 39 cnt.globalCompositeOperation = "source-over"; 40 cnt.fillStyle = "rgba(242,143,143,.2)"; 41 cnt.fillRect(0, 0, 0, 0); 42 cnt.globalCompositeOperation = "lighter"; 43 44 cnt.beginPath(); 45 cnt.fillStyle = "rgba(244,117,117,1)"; 46 cnt.arc(lx,ly, 3, 0, Math.PI*2.0, true); 47 cnt.closePath(); 48 cnt.fill(); 49 50 } 51 52 function draw(e){ 53 /*クリック位置の取得*/ 54 var tx=e.clientX; 55 var ty=e.clientY; 56 57 /*クリック位置を描く*/ 58 cnt.beginPath(); 59 cnt.fillStyle = "rgba(117,190,244,1)"; 60 cnt.arc(tx, ty, 3, 0, Math.PI*2.0, true); 61 cnt.closePath(); 62 cnt.fill(); 63 64 } 65 66 function handleError(error) { 67 /*取得失敗のアラートを表示する*/ 68 alert('位置情報を取得できません。'); 69 } 70 71 function getGeoLocation(){ 72 if (navigator.geolocation && typeof navigator.geolocation.getCurrentPosition == 'function') { 73 /*位置情報を取得可能な場合*/ 74 move.innerHTML="GeoLocation実行中" 75 i++; 76 navigator.geolocation.getCurrentPosition(showMap,handleError); 77 } 78 else { 79 /*位置情報を取得不可能な場合*/ 80 move.innerHTML="GeoLocation実行不可" 81 handleError(); 82 } 83 } 84 //--> 85 </script> 86 <style type="text/css"> 87 canvas { background-color:#FFF; border: 1px solid #999; } 88 </style> 89</head> 90 91<body onload="init()"> 92 <canvas id="canvas" width="500" height="500"></canvas> 93 <a href="javascript:void(0);" onclick="init();">現在の位置を確認する</a> 94 <div id="move">GeoLocation</div> 95 <div id="gps">現在位置</div> 96 <div id="coo">座標位置</div> 97</body> 98 99</html> 100
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。