如何将 HTML5 画布绘制为椭圆形？

Question

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

Answer 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);
}

Answer 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 */
}