纯javascript圆形(代码示例)

在纯JavaScript中绘制一个圆形可以使用HTML5的Canvas元素和JavaScript的绘图API来实现。我们需要创建一个Canvas元素，然后通过JavaScript获取到该元素的上下文对象，以便进行绘图操作。

示例代码如下所示：

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

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取绘图上下文对象
var context = canvas.getContext("2d");
// 设置圆形的半径和圆心坐标
var radius = 50;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
// 开始绘制圆形
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "red";
context.fill();
context.closePath();

在上述代码中，我们首先通过getElementById方法获取到id为"myCanvas"的Canvas元素，并将其赋值给变量canvas。然后，通过getContext方法获取到绘图上下文对象，并将其赋值给变量context。

接下来，我们定义了圆形的半径radius，并计算出圆心的坐标centerX和centerY。这里我们将圆心的坐标设置为Canvas元素的中心位置。

然后，我们调用beginPath方法开始创建路径，并使用arc方法绘制一个圆形。arc方法接受6个参数，分别是圆心的x坐标、圆心的y坐标、圆形的半径、起始角度、结束角度和绘制方向。这里我们设置起始角度为0，结束角度为2 * Math.PI（即360度），绘制方向为顺时针。

接着，我们通过fillStyle属性设置圆形的填充颜色为红色，并调用fill方法进行填充。

我们调用closePath方法结束路径的绘制。

通过以上代码，我们可以在Canvas上绘制一个红色的圆形。