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

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

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

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

Q&A

解決済

1回答

318閲覧

二つの関数を実行して表示させたいのに一つしか表示されない

summerborn179

総合スコア13

JavaScript

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

0グッド

0クリップ

投稿2019/01/18 14:37

JavaScript

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<script> 6window.addEventListener('load', draw, false); 7window.addEventListener('load',draw2,false); 8 9function draw(){ 10 //コンテキストを生成 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext("2d"); 13 14 //色を指定 15 context.strokeStyle="yellow"; 16 context.fillStyle="yellow"; 17 18 //円 19 context.beginPath(); 20 context.arc(100, 100, 40, 0, Math.PI*2, false); 21 context.stroke(); 22 } 23function draw2(){ 24  var r = 200; //半径 25  var x,y; //オブジェクトの座標 26  var degree = 0; //角度 27  var radian; //ラジアン 28  var canvas = document.getElementById('canvas'); 29  var context = canvas.getContext('2d'); 30 function loop(){ 31 degree += 1; 32 radian = degree * Math.PI/180; 33 x = r * Math.cos(radian) + canvas.width/2; 34 y = r * Math.sin(radian) + canvas.height/2; 35 context.clearRect(0, 0, canvas.width, canvas.height); 36 context.beginPath(); 37 context.fillStyle = 'red'; 38 context.arc(x, y, 10, 0, Math.PI*2); 39 context.fill(); 40 context.closePath(); 41 requestAnimationFrame(loop); 42} 43loop() 44} 45 46</script> 47</head> 48<body> 49<canvas id="canvas" width="450" height="150"></canvas> 50</body> 51</html>

私は今、半径200の円を描いて回っている「半径10の赤い円」と、「半径40の黄色い円周」をひとつのウィンドウに同時に表示させたいと思っています。上記のプログラムは、そのつもりで書いたのですが、半径10の赤い円しか表示されません。最初は「半径10の赤い円」と「半径40の黄色い円周」を表示させるプログラムをそれぞれ、別々に書き、二つのプログラムをくっつけました。別々に実行するときちんと表示されるので、つなぎ方の問題の気がしているのですが、どこを直していいか困っています。教えてください。よろしくお願いします。

ちなみに、「半径40の黄色い円周」を描いている部分はdraw()関数、円を描いて回っている「半径10の赤い円」はdraw2()関数です。

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

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

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

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

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

guest

回答1

0

ベストアンサー

context.clearRect()が全域を指定しているからです。
指定位置の指定範囲を四角形に透明にします

下記で指定をずらしてますので参考にしてみてください
(勝手に少しコードまとめてます。すみません)

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <style media="screen"> 6 #canvas { 7 background: #ccc; 8 } 9</style> 10<script> 11window.addEventListener('load', draw, false); 12 13function draw(){ 14 //コンテキストを生成 15 var canvas = document.getElementById("canvas"); 16 var context = canvas.getContext("2d"); 17 18 // *** 円1 *** 19 //色を指定 20 context.strokeStyle="yellow"; 21 context.fillStyle="yellow"; 22 23 //円 24 context.beginPath(); 25 context.arc(100, 100, 40, 0, Math.PI*2, false); 26 context.stroke(); 27 28 // *** 円2 *** 29 var r = 200; //半径 30 var x,y; //オブジェクトの座標 31 var degree = 0; //角度 32 var radian; //ラジアン 33 function loop(){ 34 degree += 1; 35 radian = degree * Math.PI/180; 36 x = r * Math.cos(radian) + canvas.width/2; 37 y = r * Math.sin(radian) + canvas.height/2; 38 context.clearRect(100, 50, canvas.width/5, canvas.height/5); // 調整してください 39 context.beginPath(); 40 context.fillStyle = 'red'; 41 context.arc(x, y, 10, 0, Math.PI*2); 42 context.fill(); 43 context.closePath(); 44 requestAnimationFrame(loop); 45 } 46 loop(); 47} 48 49</script> 50</head> 51<body> 52 <canvas id="canvas" width="700" height="500"></canvas> 53</body> 54</html> 55

追記画像

イメージ説明

投稿2019/01/18 16:24

編集2019/01/19 05:38
akihiro3

総合スコア955

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

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

summerborn179

2019/01/18 22:50

回答ありがとうございます。 すみません、提示していただいたプログラムを実行すると、黄色い円の方が表示されないです。。 私がイメージしているのは、黄色い円周上を赤い円が回るような感じなのです。 言葉足らずですみません。
akihiro3

2019/01/19 05:39 編集

あら? 追記画像のようになる予定でしたがなりませんでしたか。 context.clearRect()がどのような処理かを分かりやすくする為に canvasのサイズも変えて、二つの円も重ならないように変更してました つまり、context.clearRect()の範囲に黄色の円が存在するので表示されないという事を 説明したかったです。
summerborn179

2019/01/19 11:26

そういうことだったんですね!ありがとうございます。私の理解不足でした。失礼しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問