帶圓角的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>插入“container”標記內，然后將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在評論中所建議的那樣擺脫包裝。