1. 首頁
  2. 問答
  3. 響應圈（JavaScript的，HTML5，CSS）

響應圈（JavaScript的，HTML5，CSS）

2017-06-25 49 views
0

我有在具有響應圈 繼承人到目前爲止我的代碼麻煩：響應圈（JavaScript的，HTML5，CSS）

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 


<button onclick = "myFunction()">Click me</button> 
<script> 
function myFunction(){ 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(100, 75, 50, 0, 2 * Math.PI); 
ctx.stroke(); 
} 
</script> 

</body> 
</html>

什麼，我想在這裏實現的是，當我按一下按鈕它會產生一個圓，它現在只要再次點擊該按鈕就會產生另一個圈子，但它會自動從另一個側面移動這樣的例子

first click: O 

second click: O O 

third click : O O 

       O 

fourth click: O O 

       O O

像

來源

2017-06-25 TheGinxx009

回答

0

您需要使用兩個變量POSX和波西x和y的位置爲每圈

ctx.arc(posX, posY, 50, 0, 2 * Math.PI);

下面是一個例子

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas" width="300" height="550" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 

 
<button onclick = "myFunction()">Click me</button> 
 
<script> 
 
var posX = 100; 
 
var posY = 75; 
 
function myFunction(){ 
 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.arc(posX, posY, 50, 0, 2 * Math.PI); 
 
ctx.stroke(); 
 
posX = posX + 120; 
 
if(posX > 300) 
 
{ 
 
    posY = posY + 120; 
 
    posX = 100; 
 
} 
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2017-06-25 11:41:45 Raj

+0

爲什麼我沒有想到它。天才 。謝謝 ：） – TheGinxx009

相關問題

 相關問題