有没有办法使用画布或其他方法在 HTML 中制作圆形图像

Is there a way to make a circular image in HTML using Canvas or other Method?

本文关键字：HTML 图像方法其他有没有更新时间：2023-09-26

我知道使用 CSS border-radius 属性，canvas元素可以看起来像一个圆圈。但是，如果使用画布 API 绘制内容，然后右键单击以"另存为图像"，则在保存时，图像仍然是矩形（就像未应用边框半径一样）。有没有办法实际保存正确的图像？

我知道的所有图像格式都会产生矩形。

您可以在画布上画一个圆，圆的外侧是透明的。这将在视觉上看起来像一个圆形而不是一个矩形。

当 css 应用时，除了视觉上，它不会真正转换图像。因此，您需要的不仅仅是简单的css。这里讨论了这个问题，你想要的是使用 javascript 实现的：

应用 css 后保存画布图像

捕获并保存应用了 css 效果的图像

希望这有帮助。