如何在图像的指定坐标位置绘制圆形？附700x400图像示例

阿华AIGC实验室

2026-5-14

在指定坐标绘制圆形的实现方案

嘿，我来帮你搞定在700x400图像的(320,200)位置绘制圆形的需求！下面我会用几种主流工具来演示，你可以根据自己的技术栈选合适的方案：

使用Python的Pillow库（PIL）

Pillow是Python生态里最常用的图像处理库之一，代码简洁易上手：

from PIL import Image, ImageDraw

# 创建一张700x400的空白图像，背景设为白色（你也可以换成其他RGB颜色）
img = Image.new("RGB", (700, 400), "white")
draw = ImageDraw.Draw(img)

# 定义圆心坐标和半径（这里设为50，你可以按需调整）
center_x, center_y = 320, 200
radius = 50

# 计算椭圆的左上角和右下角坐标（Pillow用ellipse画圆，圆是特殊的椭圆）
left = center_x - radius
top = center_y - radius
right = center_x + radius
bottom = center_y + radius

# 绘制圆形：参数是坐标范围，轮廓颜色（这里是红色），线条厚度（设为2）
draw.ellipse([left, top, right, bottom], outline="red", width=2)
# 如果需要填充圆，就加上fill参数：draw.ellipse([...], outline="red", fill="pink", width=2)

# 保存或显示图像
img.save("circle_pillow.png")
img.show()

解释：Pillow没有直接的circle方法，所以用ellipse实现——当椭圆的宽高相等时就是圆，只需要通过圆心和半径算出椭圆的边界坐标就行。

使用Python的OpenCV库

如果你需要处理更复杂的计算机视觉任务，OpenCV会是更好的选择：

import cv2
import numpy as np

# 创建700x400的空白图像，背景白色（OpenCV的图像格式是BGR，所以白色是(255,255,255)）
img = np.ones((400, 700, 3), dtype=np.uint8) * 255

# 定义圆心、半径、颜色和线条厚度
center = (320, 200)
radius = 50
color = (0, 0, 255)  # OpenCV用BGR，这里是红色
thickness = 2  # 如果要填充圆，把thickness设为-1

# 绘制圆形
cv2.circle(img, center, radius, color, thickness)

# 显示图像
cv2.imshow("Circle with OpenCV", img)
cv2.waitKey(0)
cv2.destroyAllWindows()

# 保存图像
cv2.imwrite("circle_opencv.png", img)

解释：OpenCV直接提供了cv2.circle方法，参数非常直观——直接传圆心坐标、半径、颜色和厚度，填充的话把厚度设为-1即可。注意OpenCV的图像坐标是(宽度,高度)，但创建图像时是(高度,宽度)，别搞混了！

使用HTML5 Canvas（前端场景）

如果是在网页中绘制到Canvas上，用原生API就能搞定：

<!DOCTYPE html>
<html>
<body>
  <!-- 创建700x400的Canvas元素 -->
  <canvas id="myCanvas" width="700" height="400" style="border:1px solid #ccc;"></canvas>

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

    // 设置绘制样式
    ctx.strokeStyle = "red";  // 轮廓颜色
    ctx.lineWidth = 2;        // 线条厚度

    // 定义圆心和半径
    const centerX = 320;
    const centerY = 200;
    const radius = 50;

    // 绘制圆形：arc(x, y, r, 起始角度, 结束角度)，这里0到2π就是完整的圆
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();  // 描边绘制
    // 如果要填充，就用ctx.fill()，记得先设置fillStyle：ctx.fillStyle = "pink"; ctx.fill();
  </script>
</body>
</html>

解释：Canvas的arc方法专门用来绘制圆弧，设置起始角度为0，结束角度为2π就能得到一个完整的圆，非常直观。

你可以根据自己的实际场景选择对应的方案，调整半径、颜色、线条厚度这些参数来满足需求～

内容的提问来源于stack exchange，提问作者Mohsin