7

我想要一个带圆角的 HTML5 画布。我正在使用 CSS 属性border-radius: 15px来圆角。

但是,当我在画布的角落画一些东西时,我可以在角落里画画。

开头:

是)我有的:

我想要的是:

在此处输入图像描述

你有什么办法可以避免这种情况吗?我想过创建一个掩码,但我真的不知道该怎么做。有关信息,这适用于 Firefox,但不适用于 Chrome/Safari/Opera。

这是一个小例子:

http://jsfiddle.net/XYHpJ/

谢谢!

4

2 回答 2

19

只需在 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);
}
于 2013-02-26T13:49:36.420 回答
8

避免这种情况的最佳方法是在<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;和摆脱包装器。

于 2013-02-21T17:02:54.497 回答