如何绘制与此代码水平对齐的多个圆圈?我试过一个循环但无济于事。
<!doctype html>
<html>
<head>
<title> Draw circle </title>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function draw_circle (circleX, circleY, radius, fill) {
context.fillStyle = "black";
context.fillRect(0, 0, 500, 300);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 290);
context.fillStyle = fill;
context.arc(circleX, circleY, radius, 0, Math.PI*2);
context.fill();
}
draw_circle(100, 100, 30 , "cyan");
</script>
</body>
</html>
答案 0 :(得分:-1)
<canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function drawWindow(){
context.fillStyle = "black";
context.fillRect(0, 0, 500, 300);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 290);
}
function draw_circle (circleX, circleY, radius, fill) {
context.fillStyle = fill;
context.arc(circleX, circleY, radius, 0, Math.PI*2);
context.fill();
}
drawWindow();
for(var i = 0; i <= 3 ; i++){
draw_circle((i*60)+100,100, 30 , "cyan");
}
</script>