入力した数値を図形に反映

図形の縦横に数値を入力すると、図形のサイズに反映されるように動かしたいのですが、reloadを使うとページごと更新されてしまいます。ボタン出なくても、自動反映でもかまいません。

数式の埋め込み方が違うのか反映してくれません。

どなたかお優しい方教えていただける方いらっしゃいましたら、よろしくお願い致します。

    </form>

<br/> <input type="button" value="更新" onclick="koushin1()"> <body onload="draw()"> <canvas id="pattern1" width="1000" height="500"></canvas> <script> function draw() { drawPattern1(); function drawPattern1() { var canvas = document.getElementById('pattern1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.strokeRect(20, 20, 'yoko1*4.5, tate1*4.5);　**// （20，20，入力値*4.5,入力*4.5）** ctx.strokeRect(500, 20, 'yoko2*4.5','tate2*4.5); // 上同様 } function koushin1() { location.reload(); } } </script> </body>

ripan

2021/11/11 16:11

図形のサイズを大小変化させたいのですが、２つの図形をそれぞれ変更させたいです。反映図形 1. □ 2.□ 入力欄 1. 縦 50 2.縦 80 1. 横 50 2.横 80 のようなイメージです。

行動規範の内容に同意します

回答1件

ベストアンサー

少し修正してみました。こんな感じでしょうか？

html
1<body onload="draw()">
2<p>
3左側の図形のサイズ：
4縦：<input type="number" id="tate1" size="40" size="40" min="1" max="100" value="50">
5横：<input type="number" id="yoko1" size="40" size="40" min="1" max="100" value="80">
6</p>
7<p>
8右側の図形のサイズ：
9縦：<input type="number" id="tate2" size="40" size="40" min="1" max="100" value="50">
10横：<input type="number" id="yoko2" size="40" size="40" min="1" max="100" value="80">
11</p>
12<p>
13<input type="button" value="更新" onclick="koushin1()">
14</p>
15<canvas id="pattern1" width="1000" height="500"></canvas>
16
17<script>
18function draw() {
19    drawPattern1();
20}
21
22function drawPattern1() {
23    var canvas = document.getElementById('pattern1');
24    if (canvas.getContext) {
25        var ctx = canvas.getContext('2d');
26        ctx.clearRect(0, 0, canvas.width, canvas.height);
27        var yoko1 = document.getElementById('yoko1').value;
28        var tate1 = document.getElementById('tate1').value;
29        var yoko2 = document.getElementById('yoko2').value;
30        var tate2 = document.getElementById('tate2').value;
31
32        ctx.strokeRect(20, 20, yoko1 * 4.5, tate1 * 4.5); // （20，20，入力値*4.5,入力*4.5）
33        ctx.strokeRect(500, 20, yoko2 * 4.5, tate2 * 4.5); // 上同様
34    }
35}
36
37function koushin1() {
38    draw();
39
40}
41</script>

＜実行結果＞
https://jsfiddle.net/cx20/4p5q7uvg/

投稿2021/11/10 19:01

編集2021/11/13 11:12

cx20

総合スコア4646

ripan

2021/11/13 11:15

本当にありがとうございます！このような動き方にしたかったので、とても助かりました。

cx20

2021/11/13 11:23

以下は参考情報です。主な修正箇所になります。・「name="tate"」 ⇒ 一意に要素を識別したい場合は name より id で指定した方が良いです。例「id="tate1"」・「□size="40"」 ⇒ 全角スペースが含まれていた為、半角スペースに変更しました。・「'yoko2*4.5'」 ⇒ これだと単なる文字列が出力されます。一旦、変数に代入して計算する必要があります。・function koushin1() { 　　location.reload(); 　} ⇒ これだとページ全体がリロードされてしまいます。　再描画するには draw() を呼び出せば良いです。その際、前回の内容をクリアする必要があるので、clearRect() を使用しています。

ripan

2021/11/14 14:32 編集

ありがとうございます。ちなみに、 ctx.clearRect(0, 0, canvas.width, canvas.height); こちらのcanvas.widthとcanvas.heightはどことリンクした値になっているかはわかるでしょうか。

cx20

2021/11/13 15:53

> canvas.widthとcanvas.heightはどことリンクした値ログ出力してもらえれば分かるかと思います。 console.log(canvas.width + "," + canvas.height);

ripan

2021/11/14 14:33

ありがとうございます。

行動規範の内容に同意します