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帆布带圆角

回答

相关问题