如何将 HTML5 画布绘制为椭圆？ [复制]答案

【问题标题】：How to draw HTML5 canvas as an oval? [duplicate]如何将 HTML5 画布绘制为椭圆？ [复制]
【发布时间】：2021-05-11 17:47:06
【问题描述】：

我找到了很多关于如何在 HTML5 画布中绘制椭圆/椭圆的帖子，但我还没有找到将实际画布绘制为椭圆的方法。有没有办法代替矩形来做到这一点？

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

只需在 stackoverflow 上使用此示例：https://stackoverflow.com/a/12336233/1312570

解决方案：http://jsfiddle.net/rzSmw/

#canvas_container
{
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 15px;
    height: 515px;
    margin: 20px 20px;
    overflow: hidden;
    width: 690px;

    /* this fixes the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

【讨论】：

【解决方案2】：

使用 CSS 使画布成为椭圆形。

.mycanvas {
    width: 100px;
    height: 150px;
    /* Change the width and height */
    border-radius: 50%; /* Makes the canvas rounded */
    overflow: hidden; /* Make sure the canvas drawings don't overflow out of the canvas */
}

【讨论】：