###前提・実現したいこと
jsファイルとhtmlファイルでcanvasを用いて、図形を描いています。
html
1<p> 2 <button id="1" value="green">Green</button> 3 <button id="2" value="blue">Blue</button> 4 <button id="3" value="red">Red</button><br> 5 <canvas id="Canvas" width="700" height="400"></canvas> 6 </p> 7
上記のようにhtmlは作っています。
jsのファイルは、
javascript
1var canvas =document.getElementById("Canvas"); 2var context = canvas.getContext("2d"); 3var green = document.getElementById('1'); 4var blue = document.getElementById('2'); 5var red = document.getElementById('3'); 6 7green.onclick = click1; 8function click1(){ 9context.fillStyle ="green"; 10context.strokeStyle ="green"; 11context.lineWidth =1; 12context.fillRect(0,100,100,150); 13} 14 15blue.onclick = click2; 16function click2(){ 17context.fillStyle ="blue"; 18context.beginPath(); 19context.arc(60,200,50,0,2*Math.PI,false); 20context.fill(); 21} 22 23red.onclick = click3; 24function click3(){ 25context.fillStyle ="red"; 26context.strokeStyle ="red"; 27context.lineWidth =1; 28context.fillRect(0,100,100,150); 29}
上記のようにつくりました。
一応ボタンを押すごとに、緑の四角形、青の丸、赤の四角形が出ます。
今回、ここから、実現したいことは、一度表示した図の横に次の図を並べて表示して行くことです。
(現在)
赤ボタンを押すと、赤の四角形が表示、緑のボタンを押すと緑の四角形と赤の四角形がかぶリます。
(やりたいこと)
赤ボタンを押すと、赤の四角形、緑の四角形を押すと赤の四角形の右横に緑の四角形を表示したいです。
最終的にはcanvasの範囲内で横並びにそれらの図形を並べて見たいのですが、どうしてもxとyの座標を大体の数値で入力する方法しか思い浮かびませんでした。結局図の位置が固定されてしまいます。クリックする度に描画の基準となるx座標を右方向に動かす方法が分かりませんでした。
分かる方がいらっしゃいましたら、ご教示お願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。