HTML5带有圆角的画布

Question

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

但是，当我在画布的角落里绘制东西时，我无法绘制到角落。

一开始的情况如下图所示： 我现在的情况如下图所示： 我想要的效果如下图所示： 你有什么解决办法吗？我考虑过创建一个遮罩，但我不太知道该怎么做。 需要注意的是，这在Firefox上可以工作，但在Chrome / Safari / Opera上无法正常工作。

这是一个小例子： http://jsfiddle.net/XYHpJ/ 谢谢！

- alexmngn

---

你的意思是如果选择，你可以在角落里画吗？还是说当你在角落里画时，它就不再像你想要的那样圆了？有没有可能给个例子？ - NickSlash

你的Fiddle在Firefox上完美运行。已经实现了“What I want”部分，而“What I have”部分却没有发生。到底是怎么回事？... - Andrea Ligios

Answer 1

请使用stackoverflow上的这个示例：https://dev59.com/Cmkv5IYBdhLWcg3waAJT#12336233

解决方案：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);
}

- Tommy Bjerregaard

---

这确实隐藏了角落，但在 fiddle 中绘制的线仍然存在于圆角之外，只是你看不到它。 - pizza247

太棒了！我正在将一个div浮动在canvas元素上，但是无论如何都想不通为什么我的border-radius与overflow:hidden不兼容，直到我隐藏了canvas，它才起作用。这为什么有效呢？我最初认为图像是固定半径的，但似乎对于任何border-radius值都有效。 - Tristan Shelton

我相信这是由于webkit中的一个bug。我现在可以看到最新的Windows Chrome中初始代码已经可以工作了。但基本上解决方法是通过添加一个透明的1x1 png作为遮罩，然后它就会按预期工作。 - Tommy Bjerregaard

Answer 2

避免这种情况的最好方法是将<canvas>标签插入到“container”标签中，然后将border-radius应用于该container。像这样：

<div id="container">
    <canvas></canvas>
</div>

使用如下CSS： ```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在评论中建议的那样。

- Nathan Campos

---

尝试添加“-moz-border-radius: 10px;”和“-webkit-border-radius: 10px;”。对于IE，请使用此元标记：<meta http-equiv="X-UA-Compatible" content="IE=9" />。 - user1467267

@tilix 请检查我的编辑。抱歉，我忘记添加 overflow: hidden。 - Nathan Campos

@NathanCampos 你只需要将canvas对象更改为display: block;，它就可以正常工作，不需要包装器 :) - user1467267

你的例子是一个 div 嵌套在另一个 div 中。我正在使用 canvas 进行开发。请查看我的示例：http://jsfiddle.net/XYHpJ/ 并尝试在角落里绘制一些东西。 - alexmngn