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

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

ただいまの
回答率

87.48%

何本も線が引かれてしまいます。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 364

score 15

前提・実現したいこと

線を引く処理が関数disp,disp2で行っています。
線を引く機能を実装中に以下の問題が発生しました。

発生している問題

例えば、X_Aで0を選択するとx軸の0に赤い引かれてます。その次4を選択するとx軸の4のところに赤い線が引かれます。
しかし、4を選択したら0の線がそのまま残ってします。4を選択したら0の線が消えるようにしたいです。
実行

ソースコード

<!DOCTYPE html>
  <html long="ja">
    <meta charset="utf-8">
    <title>グラス</title>
    <body>
      <header>
        <h1 style="text-align:center">キャンバスでグラフ描画</h1>
      <h2 style="text-align:center">グラフを描画して二分法で解を求めます。</h2>
      </header>
      <script src="js/canvas.js"></script>
      <h3>グラフです。</h3>
        <canvas id="cv"width = 1000 height="600" align:center></canvas>
      </div>

      <script type="text/javascript"> //
     // type属性でしていする

      //キャンバス要素を取得
      var cvs = document.getElementById("cv");
      var ctx = cvs.getContext("2d");

      var width  = cv.width;
      var height = cv.height;
      var width2 = width/2;
      var height2 = height/2;

    function coordinate(){
      //x軸
      ctx.fillStyle = "rgb(0,180,0)";
      ctx.moveTo(0,height2);
      ctx.lineTo(width,height2);
      ctx.stroke();
      //y軸
     ctx.fillStyle = "rgb(0,180,0)";
      ctx.moveTo(width2,0);
      ctx.lineTo(width2,height);
      ctx.stroke();

      for(var i= -22;i<22;i+=2){ 
        //5ずつ
        ctx.fillText(i, (i*20)+width2,height2+10);
      }

      for(var i= -22;i<22;i+=2){ 
        //2ずつ
        ctx.fillText(-i, width2+10, (i*20)+height2);
      }

    }

      function disp(){
        var start = eval(document.nibun01.x_a.value);
        var start1 = (start*20) +width2;
        //読み込んだ値が違う時を移動する
        var start1 = (start*20) +width2;
        ctx.strokeStyle = "red";
        console.log(start1);
        ctx.beginPath();//初期化
        ctx.moveTo(start1,height2-100);
        ctx.lineTo(start1,height2+100);
        ctx.stroke();
      }

      function del(){
        ctx.clearRect(0,0,width,height);
      }

     function disp2(){
        var start10 = eval(document.nibun01.x_b.value);
        start11 = (start10*20)+width2;
        console.log(start11); 
        ctx.strokeStyle="blue"; //色の指定
        ctx.beginPath();//初期化
        ctx.moveTo(start11,height2-100);
        ctx.lineTo(start11,height2+100);
        ctx.stroke();
    }


    coordinate();
    disp();
    disp2();

      </script>
    </body>
    <br>
    <br>
    <FORM NAME="nibun01" >
      <p>処理:</p>

      <p>線を引く</p>
      <label for="num1">x_A</label>
      <input id ="num1"type="number" name="x_a" value="0">
      <input type="button" value="表示"
       onclick="disp()">
      <br>
      <label for="num2">x_B</label>
      <input id="num2"type="number" name="x_b" value="0">
      <input type="button" value="表示"
       onclick="disp2()">

       <div id = "output"></div>
       <label for="siki">式:</label>
       <input type="text" name="siki">
       <input type="button" value="表示"
       onclick="disp3()">
    </FORM>
  </html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

+3

4を選択したら0の線が消えるようにしたいです。

なら、そのときに0の線を消す(というより背景と同じ色の線を描画する)コードを書く必要があります

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/28 15:19

    やり方を教えてください。

    キャンセル

  • 2020/06/28 15:23

    たんに軸を描画する関数を呼べばいいだけでは

    キャンセル

  • 2020/07/23 09:16 編集

    やり方がわからないので例を示して欲しいです。
    書き直した方がいいところなどありましたら指摘してください。

    キャンセル

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

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

関連した質問

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