我想要一个带圆角的 HTML5 画布。我正在使用 CSS 属性border-radius: 15px
来圆角。
但是,当我在画布的角落画一些东西时,我可以在角落里画画。
开头:
是)我有的:
我想要的是:
你有什么办法可以避免这种情况吗?我想过创建一个掩码,但我真的不知道该怎么做。有关信息,这适用于 Firefox,但不适用于 Chrome/Safari/Opera。
这是一个小例子:
谢谢!
我想要一个带圆角的 HTML5 画布。我正在使用 CSS 属性border-radius: 15px
来圆角。
但是,当我在画布的角落画一些东西时,我可以在角落里画画。
开头:
是)我有的:
我想要的是:
你有什么办法可以避免这种情况吗?我想过创建一个掩码,但我真的不知道该怎么做。有关信息,这适用于 Firefox,但不适用于 Chrome/Safari/Opera。
这是一个小例子:
谢谢!
只需在 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);
}
避免这种情况的最佳方法是在<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/
您还可以按照Allendar在评论中的建议使用display: block;
和摆脱包装器。