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

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

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

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

JavaScript

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

Q&A

解決済

2回答

1845閲覧

Canvasについて

ajgd261

総合スコア12

canvas

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

JavaScript

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

0グッド

0クリップ

投稿2016/11/04 06:52

###前提・実現したいこと
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座標を右方向に動かす方法が分かりませんでした。
分かる方がいらっしゃいましたら、ご教示お願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

とりあえずな感じですが。

javascript

1function click1(){ 2 3 var canvas =document.getElementById("Canvas"); 4 var context = canvas.getContext("2d"); 5 var green = document.getElementById('1'); 6 var blue = document.getElementById('2'); 7 var red = document.getElementById('3'); 8 9 var objwidth = document.getElementById('hoge'); 10 var hiddenValue = objwidth.value; 11 12 13 context.fillStyle ="green"; 14 context.strokeStyle ="green"; 15 context.lineWidth =1; 16 context.fillRect(hiddenValue,100,100,150); 17 objwidth.value = parseInt(hiddenValue)+parseInt(100); 18} 19 20function click2(){ 21 22 var canvas =document.getElementById("Canvas"); 23 var context = canvas.getContext("2d"); 24 var green = document.getElementById('1'); 25 var blue = document.getElementById('2'); 26 var red = document.getElementById('3'); 27 28 var objwidth = document.getElementById('hoge'); 29 var hiddenValue = parseInt(objwidth.value)+parseInt(60); 30 31 context.fillStyle ="blue"; 32 context.beginPath(); 33 context.arc(hiddenValue,200,50,0,2*Math.PI,false); 34 context.fill(); 35 objwidth.value = parseInt(hiddenValue)+parseInt(50); 36} 37 38function click3(){ 39 var canvas =document.getElementById("Canvas"); 40 var context = canvas.getContext("2d"); 41 var green = document.getElementById('1'); 42 var blue = document.getElementById('2'); 43 var red = document.getElementById('3'); 44 45 var objwidth = document.getElementById('hoge'); 46 var hiddenValue = objwidth.value; 47 48 context.fillStyle ="red"; 49 context.strokeStyle ="red"; 50 context.lineWidth =1; 51 context.fillRect(hiddenValue,100,100,150); 52 objwidth.value = parseInt(hiddenValue)+parseInt(100); 53}

HTML

1<p> 2 <button id="1" value="green" onclick="click1();">Green</button> 3 <button id="2" value="blue" onclick="click2();">Blue</button> 4 <button id="3" value="red" onclick="click3();">Red</button><br> 5 <canvas id="Canvas" width="700" height="400"></canvas> 6 <input type="hidden" id="hoge" value="0"> 7</p>

単独で動かせるように変更してしまったので、DOMの取得は変更しなおして頂く必要があります。
これに減算の追加や横方向の上限を設定する感じになるかと思います。

投稿2016/11/04 08:05

nobinobi

総合スコア199

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

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

0

描画の際に位置情報と描画した幅を変数に保持しておけば可能です。

// まず座標を保持する変数用意
var origin = {x: 0, y: 0}; // 起点座標は0,0
green.onclick = click1;
function click1(){
var w = 100; // 描画幅
var h = 100; // 描画高
context.fillStyle ="green";
context.strokeStyle ="green";
context.lineWidth =1;
context.fillRect(origin.x, origin.y, w, h); // 起点座標を指定する
origin.x += w; // ここで今回の起点座標xと描画幅を保持させておく
// origin.y += h; // ここは高さの指定も欲しくなった場合ですね
}

click2,click3に関しても同様ですが、円に関しては少し計算部分の変更が必要になります

投稿2016/11/04 08:01

yag

総合スコア100

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問