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

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

ただいまの
回答率

88.91%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,213

mew.labda

score 7

前提・実現したいこと

javascriptとHTML5を使い、フォームからの(左上x座標,同y座標,右上x座標,同y座標,右下x座標,同y座標,左下x座標,同y座標)といった形の記述を読み取り、Canvas上でその座標指定によってパスで図形を表示する動作を実現したく実験しています。
一度Submitを押して表示した後でも、もう一度別の座標を入力しSubmitを押すことで前に表示した図形を保持しつつ新しい図形を挿入できるような挙動を目指しています。

発生している問題・エラーメッセージ

Submitを押しても図形が表示されません。

該当のソースコード

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <meta charset="UTF-8">
        <title>CANVASテスト</title>
        <script type="text/javascript" language="javascript">
        </script>
    </head>
    <body>
        <div id="message">
            <canvas id="viewer" width="766" height="542"></canvas>
            <form>
                <input type="text"><button type="submit">send</button>
            </form>
        </div>
    </body>
    <script>
        function showpanel(top_leftx, top_lefty, top_rightx, top_righty, bottom_rightx, bottom_righty, bottom_leftx, bottom_lefty) {
            /* canvasのノードオブジェクト取得 */
            var canvas = document.getElementById('viewer');
            /* コンテキストの指定(2d) */
            var cpanel = canvas.getContext('2d');
            /* パネル描画 */
            cpanel.beginPath();
            cpanel.moveTo(top_leftx, top_lefty);
            cpanel.moveTo(top_rightx, top_righty);
            cpanel.moveTo(bottom_rightx, bottom_righty);
            cpanel.moveTo(bottom_leftx, bottom_lefty);
            cpanel.closePath();
            cpanel.stroke();
        }
        $("#message form").on("submit", function(ev) {
        ev.preventDefault();  // onsubmitのデフォルト動作(reload)を抑制
        // テキストデータ取得
        var $text = $(this).find("input[type=text]");
        var data = $text.val();
        var sdata = data.split(",");
        if(data.length > 0 && sdata.length == 8) {
            showpanel(sdata[0],sdata[1],sdata[2],sdata[3],sdata[4],sdata[5],sdata[6],sdata[7]);
        }
      });
    </script>
</html>

試したこと

試しに、

        var canvas = document.getElementById('viewer');
            /* コンテキストの指定(2d) */
            var cpanel = canvas.getContext('2d');
            /* パネル描画 */
            cpanel.beginPath();
            cpanel.moveTo(10, 10);
            cpanel.moveTo(80, 10);
            cpanel.moveTo(80, 100);
            cpanel.moveTo(10, 100);
            cpanel.closePath();
            cpanel.stroke();


とだけjavascript部分に記述するだけのテストもしてみたのですが同じく何も表示されませんでした。
初心者で何がわからないのかもわからないような状況です。どうかご教授よろしくおねがいします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/18 13:27

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

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る