JS 绘制圆圈 - Javascript

在Javascript中绘制圆圈可以使用HTML5的canvas元素实现，canvas可以让我们在网页上绘制各种图形。

创建canvas元素

在HTML中创建一个canvas元素，给它指定一个宽度和高度即可。

<canvas id="myCanvas" width="400" height="400"></canvas>

获取canvas元素

使用Javascript代码获取canvas元素。

var canvas = document.getElementById("myCanvas");

获取绘制上下文

我们可以使用getContext()方法获取到绘制上下文。

var ctx = canvas.getContext("2d");

绘制圆形

使用canvas上下文的方法绘制圆形。

ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise);
ctx.fill();

arc方法需要提供以下参数：

• centerX: 圆心的x坐标
• centerY: 圆心的y坐标
• radius: 圆的半径
• startAngle: 起始角度
• endAngle: 终止角度
• anticlockwise: 是否逆时针，默认为false

fill()方法可以填充圆形，也可以使用stroke()方法绘制圆形边框。

示例代码

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
ctx.fillStyle = "#FF0000";
ctx.fill();

以上代码将在canvas元素的中央绘制一个半径为50的红色圆形。

总结

Javascript中使用canvas元素可以绘制各种图形，学习绘制圆形可以帮助我们更好地理解canvas的使用。