###前提・実現したいこと
javascriptとHTML5を使い、フォームからの(左上x座標,同y座標,右上x座標,同y座標,右下x座標,同y座標,左下x座標,同y座標)といった形の記述を読み取り、Canvas上でその座標指定によってパスで図形を表示する動作を実現したく実験しています。
一度Submitを押して表示した後でも、もう一度別の座標を入力しSubmitを押すことで前に表示した図形を保持しつつ新しい図形を挿入できるような挙動を目指しています。
###発生している問題・エラーメッセージ
Submitを押しても図形が表示されません。
###該当のソースコード
javascript
1<!DOCTYPE html> 2<html> 3 <head> 4 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 5 <meta charset="UTF-8"> 6 <title>CANVASテスト</title> 7 <script type="text/javascript" language="javascript"> 8 </script> 9 </head> 10 <body> 11 <div id="message"> 12 <canvas id="viewer" width="766" height="542"></canvas> 13 <form> 14 <input type="text"><button type="submit">send</button> 15 </form> 16 </div> 17 </body> 18 <script> 19 function showpanel(top_leftx, top_lefty, top_rightx, top_righty, bottom_rightx, bottom_righty, bottom_leftx, bottom_lefty) { 20 /* canvasのノードオブジェクト取得 */ 21 var canvas = document.getElementById('viewer'); 22 /* コンテキストの指定(2d) */ 23 var cpanel = canvas.getContext('2d'); 24 /* パネル描画 */ 25 cpanel.beginPath(); 26 cpanel.moveTo(top_leftx, top_lefty); 27 cpanel.moveTo(top_rightx, top_righty); 28 cpanel.moveTo(bottom_rightx, bottom_righty); 29 cpanel.moveTo(bottom_leftx, bottom_lefty); 30 cpanel.closePath(); 31 cpanel.stroke(); 32 } 33 $("#message form").on("submit", function(ev) { 34 ev.preventDefault(); // onsubmitのデフォルト動作(reload)を抑制 35 // テキストデータ取得 36 var $text = $(this).find("input[type=text]"); 37 var data = $text.val(); 38 var sdata = data.split(","); 39 if(data.length > 0 && sdata.length == 8) { 40 showpanel(sdata[0],sdata[1],sdata[2],sdata[3],sdata[4],sdata[5],sdata[6],sdata[7]); 41 } 42 }); 43 </script> 44</html>
###試したこと
試しに、
javascript
1 var canvas = document.getElementById('viewer'); 2 /* コンテキストの指定(2d) */ 3 var cpanel = canvas.getContext('2d'); 4 /* パネル描画 */ 5 cpanel.beginPath(); 6 cpanel.moveTo(10, 10); 7 cpanel.moveTo(80, 10); 8 cpanel.moveTo(80, 100); 9 cpanel.moveTo(10, 100); 10 cpanel.closePath(); 11 cpanel.stroke();
とだけjavascript部分に記述するだけのテストもしてみたのですが同じく何も表示されませんでした。
初心者で何がわからないのかもわからないような状況です。どうかご教授よろしくおねがいします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/18 04:27