响应圈（javascript、html5、css）_Javascript_Css_Html

响应圈（javascript、html5、css）

javascript css html

响应圈（javascript、html5、css）,javascript,css,html,Javascript,Css,Html,我在建立一个反应圈方面遇到了麻烦以下是我目前的代码： <!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 oncli

我在建立一个反应圈方面遇到了麻烦以下是我目前的代码：

<!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>

这样

对于每个圆的x和y位置，需要使用两个变量posX和posY

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

这里有一个例子


您的浏览器不支持HTML5画布标记。
点击我
var-posX=100；
var-posY=75；
函数myFunction（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
弧（posX，posY，50，0，2*Math.PI）；
ctx.stroke（）；
posX=posX+120；
如果（posX>300）
{
posY=posY+120；
posX=100；
}
}

为什么我没有想到它。天才。谢谢：）

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