如何将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 */
}