HTML5帆布帶圓角

我想要一個帶圓角的HTML5帆布。我正在使用CSS屬性border-radius: 15px繞過我的角落。HTML5帆布帶圓角

但是，當我在畫布的角落畫一些東西時，我可以畫在角落裏。

開頭：

我有什麼：

我想要什麼：

enter image description here

你有任何SOLUT離子，以避免這一點？我想創建一個面具，但我真的不知道該怎麼做.. 有關信息，這適用於Firefox，但不適用於Chrome/Safari/Opera。

這是一個小例子：

http://jsfiddle.net/XYHpJ/

謝謝！

來源

2013-02-21 alexmngn

你的意思是，你可以在角落裏畫，如果你選哪個？或者當你在角落畫畫時，你會停下來想要怎樣？任何一個例子的機會？ – NickSlash 2013-02-21 17:07:19

你的小提琴完全適用於Firefox。 **我想**部分是實現的，而**我有**部分不會發生。究竟是什麼？... – 2013-02-26 11:16:20

只需使用計算器上的這個例子：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); 
}

來源

2013-02-26 13:49:36

這絕對隱藏了角落，但在小提琴中繪製的線條仍然存在於圓角之外，您無法看到它。 – thatmiddleway 2014-01-07 15:27:10

夢幻般的答案！我在一個畫布元素上浮動了一個div，並且無法爲我的生活弄清楚爲什麼我的'border-radius'不能用'overflow：hidden'工作，直到我隱藏畫布並且它工作。爲什麼這個工作的任何解釋？我最初認爲圖像是一個固定的半徑，但它似乎適用於我的任何邊界半徑值。 – 2017-10-17 17:00:51

避免這種情況的最佳方法是在「容器」標籤中插入<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的意見建議。

來源

2013-02-21 17:02:54

已經過測試，並且不起作用！ – alexmngn 2013-02-21 17:03:56

嘗試添加'-moz-border-radius：10px;'和'-webkit-border-radius：10px;'。對於IE使用這個meta標籤：'' – 2013-02-21 17:11:52

@tilix檢查我的編輯。對不起，我忘了添加'overflow：hidden' – 2013-02-21 17:13:55

HTML5帆布帶圓角

回答

相關問題