響應圈（javascript，html5，css）
[英]Responsive Circle (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
像那樣
1 個解決方案
解決方案1
0 已采納 2017-06-25 11:41:45
您需要為每個圓的x和y位置使用兩個變量posX和posY
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>
CSS3 / HTML5自適應圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.