Javascript 圆角HTML5画布

我想要一个圆角的HTML5画布。我正在使用CSS属性

border radius:15px

来圆角

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

开始时：

我所拥有的：

我想要的是：

你有什么办法避免这种情况吗？我想做一个面具，但我真的不知道怎么做。。 请注意，这在Firefox上有效，但在Chrome/Safari/Opera上无效

这是一个小例子：

---

谢谢

避免这种情况的最佳方法是将

插入“container”标签内，然后将

边界半径

应用于容器。像这样：

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

一个有效的例子：

---

您还可以使用

display:block并按照注释中的建议除去包装器。
只需在stackoverflow上使用以下示例：

解决方案：

你的意思是如果你愿意，你可以在角落里画画吗？或者当你在角落里画的时候，它就不再是你想要的圆形了？有机会举个例子吗？你的小提琴在Firefox上运行得非常好。我想要的部分实现了，而我拥有的部分没有实现。到底是什么？…尝试添加
-moz边界半径：10px和
-webkit边界半径：10px。对于IE，请使用此元标记：
@tilix检查我的编辑。对不起，我忘了添加
溢出：隐藏
@NathanCampos您只需将画布对象更改为
显示：块并且它只接受工作，本身不需要包装：）您的示例是div中的一个div。我正在使用canvas。请看我这里的例子：试着在角落里画。这肯定会隐藏角落，但在小提琴上画的线仍然存在于圆角之外，你就是看不到。答案太棒了！我在画布元素上浮动了一个div，我一辈子都无法弄清楚为什么我的
边框半径
无法使用
溢出：隐藏
，直到我隐藏画布，它才起作用。有什么解释为什么会这样吗？我最初假设图像是一个固定半径，但对我来说，它似乎适用于任何边界半径值。我很确定这是由于webkit中的一个bug造成的。我可以看到，最初的代码现在在Windows上最新的Chrome中工作。但基本上解决办法是，通过添加一个透明的1x1 png作为遮罩，它将使其按预期工作。
#container {
    border-radius: 10px;
    background-color: white;
    border: 1px solid #000;
    overflow: hidden;
}

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

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