質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3548閲覧

Canvasに、フォームに入力した内容に沿って図形を描画したい。

mew.labda

総合スコア7

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/05/17 15:54

###前提・実現したいこと
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部分に記述するだけのテストもしてみたのですが同じく何も表示されませんでした。
初心者で何がわからないのかもわからないような状況です。どうかご教授よろしくおねがいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

使うべきメソッドはmoveToではなく、lineToかと思います。moveToのところをlineToに置き換えてみてください。

投稿2017/05/17 16:30

sii_side

総合スコア849

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mew.labda

2017/05/18 04:27

一つ目のmoveTo以外をlineToに変更したところ、期待した通りの動作をしました。これで前に進めます。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問