如何在 JavaScript 中绘制圆形？

2025年4月18日 | 阅读 4 分钟

绘制圆形是 JavaScript 语言的一项重要功能。JavaScript 是一种用于操作功能的 Web 应用程序编程语言。JavaScript 函数用于在网页中添加所需的功能。

我们使用单一和多种颜色在网页上创建了空心和实心圆。程序员使用 JavaScript 处理，就像艺术家需要画布来创作艺术一样。

JavaScript 画布会在 HTML 页面上显示一个矩形。我们可以使用 JavaScript 画布和其他方法添加颜色、创建形状（圆形）和数字艺术品。

设置画布

1. 我们正在设置 JavaScript 画布。在使用 JavaScript 在网页上绘制圆形之前，这是必需的。

我们可以像下面这样使用 2D 动画设置画布。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

2. 我们使用 getElementById 函数获取了画布的引用。想象一下，这就像在一堆画布中通过唯一标识符找到你的画布。

3. JavaScript 函数通过在网页上使用“getContext('2d')”来显示 2D 绘图。

4. 想象一下，我们正在为画布上的绘画准备画笔。在脚本标签中使用 '2d' 符号表示二维上下文。

绘制 JavaScript 圆形

我们使用 arc() 方法作为工具箱中的一个独特工具来绘制圆形。

arc() 方法需要六个参数：圆的坐标如下： - x 是圆的 x 坐标； - y 是圆的 y 坐标； - radius 是圆的半径； - startAngle 是圆的弧度起始点； - endAngle 是圆的弧度结束点； - anticlockwise 是一个布尔值，用于控制圆的运动方向。

这描述了如何绘制一个圆形

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

在这种情况下，beginPath() 方法是第一个也是必需的方法，并且首先应用。
您正在使用 beginPath() 方法来介绍画笔：“嘿，我想在画布上开始一个新的绘画。”
然后，要绘制一个圆，我们使用指定的参数调用 arc() 方法。圆将具有以下尺寸：半径 = 50，从 0 弧度开始，到 2 * Math.PI 弧度结束，或一个完整的圆，并且将以顺时针方向绘制。
JavaScript 的 fill() 方法为圆提供颜色，而 "fillStyle" 参数则应用颜色。考虑我们正在选择一种油漆颜色，然后将该颜色用于圆。
"lineWidth" 属性用于设置圆的粗细。我们使用 strokeStyle 属性来设置颜色。圆的 stroke 属性用于使用 stroke() 方法应用圆。此方法用于选择铅笔并绘制圆的轮廓。

示例

以下示例显示了带有 JavaScript 函数的圆。

示例 1

以下示例显示了使用 JavaScript 函数和 style 标签绘制的基本圆。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title> Draw a circle using javascript </title>
  </head>
  <body onload = "draw_circle();" style = "background-color:grey;">
  <h4 style = "color:pink;"> Draw a circle using javascript </h4>
    <canvas id = "circle_shape" width = "190" height = "100"></canvas>
    <script>
      function draw_circle()
      {
        var canvas = document.getElementById('circle_shape');
        if (canvas.getContext)
        {
          var ctx = canvas.getContext('2d'); 
          var X = canvas.width / 2;
          var Y = canvas.height / 2;
          var R = 40;
          ctx.beginPath();
          ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
          ctx.lineWidth = 5;
          ctx.strokeStyle = '#FF00ff';
          ctx.stroke();
        }
      }
    </script>
  </body>
</html>

输出

输出显示了使用 JavaScript 所需的圆。

示例 2

以下示例显示了使用 JavaScript 函数和 style 标签绘制的实心圆。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title> Draw a circle using javascript </title>
  </head>
  <body onload = "draw_circle();" style = "background-color:grey;">
  <h4 style = "color:pink;"> Draw a filled circle using javascript </h4>
    <canvas id = "circle_shape" width = "190" height = "100"></canvas>
    <script>
      function draw_circle()
      {
        var canvas = document.getElementById('circle_shape');
        if (canvas.getContext)
        {
          var ctx = canvas.getContext('2d'); 
          var X = canvas.width / 2;
          var Y = canvas.height / 2;
          var R = 40;
          ctx.beginPath();
          ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
          ctx.lineWidth = 5;
          ctx.fillStyle = '#FF00ff';
          ctx.stroke();
          ctx.fill();
        }
      }
    </script>
  </body>
</html>

输出

输出显示了使用 JavaScript 所需的圆。

示例 3

以下示例显示了使用 JavaScript 函数和 style 标签绘制的实心和多色圆。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title> Draw a circle using javascript </title>
  </head>
  <body onload = "draw_circle();" style = "background-color:grey;">
  <h4 style = "color:pink;"> Draw a filled circle using javascript </h4>
    <canvas id = "circle_shape" width = "190" height = "100"></canvas>
    <script>
      function draw_circle()
      {
        var canvas = document.getElementById('circle_shape');
        if (canvas.getContext)
        {
          var ctx = canvas.getContext('2d'); 
          var X = canvas.width / 2;
          var Y = canvas.height / 2;
          var R = 40;
          ctx.beginPath();
          ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
          ctx.lineWidth = 15;
          ctx.strokeStyle = 'aqua';
          ctx.fillStyle = '#FF00ff';
          ctx.stroke();
          ctx.fill();
        }
      }
    </script>
  </body>
</html>

输出

输出显示了使用 JavaScript 所需的圆。

结论

JavaScript 就像数字艺术家的工具集。它提供了范围广泛的工具和技术，例如 arc()，用于处理和创建视觉效果。同时，绘制一个圆可能看起来只是一个简单的步骤，但它代表了对 JavaScript 如何与 HTML 画布交互的知识的重大进展。

下一主题JavaScript Bin

如何在 JavaScript 中绘制圆形？

设置画布

绘制 JavaScript 圆形

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何在 JavaScript 中绘制圆形？

设置画布

绘制 JavaScript 圆形

示例

结论

相关帖子

如何在 JavaScript 中获取当前 URL？

最佳在线 JavaScript 课程

如何在 JavaScript 中在新标签页中打开 href 链接

免费 JavaScript

JavaScript 中的二维数组

JavaScript RegExp [0-9] 组（不适用于数字）

JavaScript 中的金字塔

JavaScript 中用于电子邮件验证的正则表达式

JavaScript 数组练习

学习 JavaScript 需要多长时间？

订阅 Tpoint Tech

联系信息

关注我们