带圆角的HTML5画布

Question

我想要一个带圆角的HTML5画布。我正在使用CSS属性border-radius: 15px来绕过我的角落。

但是，当我在画布的角落画一些东西时，我可以画在角落里。

一开始：

我有什么：

我想要的是什么：

你有什么解决办法可以避免这种情况吗？我想创建一个面具，但我真的不知道怎么做.. 有关信息，这适用于Firefox，但不适用于Chrome / Safari / Opera。

这是一个小例子：

http://jsfiddle.net/XYHpJ/

谢谢！

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

避免这种情况的最佳方法是将<canvas>插入“容器”标记内，然后将border-radius应用于容器。像这样：

<div id="container">
    <canvas></canvas>
</div>

使用这个CSS：

#container {
    border-radius: 10px;
    background-color: white;
    border: 1px solid #000;
    overflow: hidden;
}

#container > div {
    height: 200px;
    background-color: red;
}

一个工作示例：http://jsbin.com/onuqid/2/

您还可以使用display: block;并删除评论中建议的Allendar包装。