如何使用 JavaScript 在 HTML5 Canvas 中绘制一个圆圈？答案

【问题标题】：How to draw a circle in HTML5 Canvas using JavaScript?如何使用 JavaScript 在 HTML5 Canvas 中绘制一个圆圈？
【发布时间】：2014-09-25 13:28:23
【问题描述】：

如何使用最少的 JavaScript 代码在 HTML5 Canvas 中绘制一个简单的圆圈？

【问题讨论】：

@Kinrany 我同意。这不可能太宽泛。问题出在 API 中没有简单的“drawCircle”命令。相反，我们必须执行一组特殊的步骤，涉及beginPath、arc、fill 等。我们必须了解圆是圆弧的一种特殊情况，什么起始角和终止角是合适的或最佳的。也不清楚是否有必要打电话给closePath 这就是我们正在寻找这个问题的全部内容。这个问题不应该因为太宽泛而被关闭。

标签： javascript html canvas

【解决方案1】：

根据 Sam 的回答，我将所有参数组合到一个对象中，以便在使用该函数时更具可读性。

function drawCircle(obj) {
obj.ctx.beginPath();
obj.ctx.arc(obj.x, obj.y, obj.radius, 0, 2 * Math.PI, false);
if (obj.fill) {
    obj.ctx.fillStyle = obj.fill;
    obj.ctx.fill();
}
if (obj.stroke) {
    obj.ctx.lineWidth = obj.strokeWidth;
    obj.ctx.strokeStype = obj.stroke;
    obj.ctx.stroke();
}
}

使用方法：

let ctx = canvas.getContext('2d');    
drawCircle({
            ctx: ctx,
            x: 100,
            y: 100,
            radius: 20,
            fill: "green",
        });

【讨论】：

【解决方案2】：

我把上面的答案变成了有用的功能：

function drawCircle(ctx, x, y, radius, fill, stroke, strokeWidth) {
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false)
  if (fill) {
    ctx.fillStyle = fill
    ctx.fill()
  }
  if (stroke) {
    ctx.lineWidth = strokeWidth
    ctx.strokeStyle = stroke
    ctx.stroke()
  }
}

然后，像这样使用它在坐标 50,50，半径为 25 处绘制一个带有红色笔划（宽度为 2）的黑色圆圈：

let ctx = canvas.getContext('2d')
drawCircle(ctx, 50, 50, 25, 'black', 'red', 2)

【讨论】：

【解决方案3】：

以下是如何在 HTML5 中使用 JavaScript 绘制圆：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

body {
  margin: 0px;
  padding: 0px;
}

&lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt;

【讨论】：

如果你想在for循环中绘制多个圆圈，只在循环后填充一次，请确保在调用arc()之前使用context.moveTo(x, y)。

【解决方案4】：

首先，你需要获取画布上下文：-

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

现在让我们定义位置和半径：-

const X = canvas.width / 2;
const Y = canvas.height / 2;
const radius = 45;

现在让我们设置颜色和线宽：-

ctx.lineWidth = 3;
ctx.strokeStyle = '#FF0000';

现在，要画圆，我们必须使用 arc 方法并将角度设置为 2 X π

ctx.beginPath();
ctx.arc(X, Y, radius, 0, 2 * Math.PI, false);
ctx.stroke();

【讨论】：

【解决方案5】：

使用新的 Canvas Path2D 创建形状更容易，它使用相同的画布绘图 API，并允许将声明与绘图本身分离，并重用复杂的几何图形：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

let circle = new Path2D();  // <<< Declaration
circle.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'blue';
context.fill(circle); //   <<< pass circle to context

context.lineWidth = 10;
context.strokeStyle = '#000066';
context.stroke(circle);  // <<< pass circle here too

body {
margin: 0px;
padding: 0px;
}

&lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt;

【讨论】：