如何使用 HTML5 的 canvas 元素绘制一个圆形？

推荐答案

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Canvas 圆形绘制</title>
<style>
  canvas { border: 1px solid black; }
</style>
</head>
<body>

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

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 设置圆的参数
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = 75;
  const startAngle = 0;
  const endAngle = 2 * Math.PI;

  // 开始绘制路径
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, startAngle, endAngle);

  // 设置样式
  ctx.fillStyle = 'skyblue'; // 填充颜色
  ctx.strokeStyle = 'blue';  // 描边颜色
  ctx.lineWidth = 3;        // 描边宽度

  // 完成绘制
  ctx.fill();    // 填充
  ctx.stroke();  // 描边
</script>

</body>
</html>

本题详细解读

使用 HTML5 的 canvas 元素绘制圆形，主要步骤包括：

1. 获取 Canvas 元素和 2D 渲染上下文：

   • 首先，使用 document.getElementById 获取 <canvas> 元素。
   • 然后，通过调用 canvas.getContext('2d') 获取 2D 渲染上下文对象 ctx。这个上下文对象提供了在画布上绘图的方法。

2. 定义圆形参数：

   • centerX 和 centerY： 圆心的 X 和 Y 坐标，通常设置为画布的中心。
   • radius： 圆的半径。
   • startAngle： 圆弧的起始角度，通常为 0。
   • endAngle： 圆弧的结束角度，通常为 2 * Math.PI，表示完整的圆形。

3. 开始绘制路径：

   • ctx.beginPath(): 开始一个新的路径。 每次绘制新图形之前都应该调用这个方法。

4. 绘制圆形弧线：

   • ctx.arc(centerX, centerY, radius, startAngle, endAngle): 使用 arc() 方法来绘制圆弧。 这个方法接收圆心坐标、半径、起始角度和结束角度作为参数。

5. 设置样式：

   • ctx.fillStyle = 'skyblue';： 设置填充颜色。
   • ctx.strokeStyle = 'blue';： 设置描边颜色。
   • ctx.lineWidth = 3;： 设置描边的宽度。

6. 完成绘制：

   • ctx.fill()： 使用当前 fillStyle 填充由 arc() 方法创建的封闭路径。
   • ctx.stroke()： 使用当前 strokeStyle 和 lineWidth 描绘路径轮廓。

关键点：

• getContext('2d')： 这是获取 Canvas 2D 渲染上下文的关键。
• beginPath()： 开始新的路径，避免路径叠加。
• arc()： 用于绘制圆形、圆弧或部分圆弧。
• fillStyle 和 strokeStyle： 分别设置填充和描边样式。
• fill() 和 stroke()： 分别填充和描边路径。

这个示例代码展示了在 Canvas 中绘制一个简单的填充和描边的圆形的基本方法。开发者可以根据需要调整颜色、大小、位置等参数。