如何在任何webkit for Mac中隐藏父圆角的画布内容？

Question

我有一个div圆角的父母,其中包含canvas:

<div id="box">
    <canvas width="300px" height="300px"></canvas>
</div>?

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
}?

画布呈现一个溢出父级的红色矩形.正如所料,这是我在所有浏览器中得到的:

问题:

但是,对于在Mac OS Lion中运行的webkit浏览器(我测试了Safari 5.1.5和Chrome 19),画布在圆角处仍然可见:

有趣的是,这个问题似乎只有在内部元素是一个时才会发生canvas.对于任何其他子元素,正确隐藏内容.

一种解决方法是将相同的圆角应用于画布本身,但不幸的是,这是不可能的,因为我需要为画布相对位置设置动画.

应该工作的另一个解决方法是在类似于圆角形状的剪切区域中重绘画布,但我更喜欢更干净的CSS3解决方案.

那么,是否知道如何在Mac上修复Safari和Chrome？

编辑:在Win7上的Chrome中也会出现问题

jsFiddle在这里

Answer 1

这是在css中添加的代码:

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

HTML源代码

<div id="box">
  <canvas width="300px" height="300px"></canvas>
</div>

Css源代码

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Javascript源代码

var $canvas = $("canvas");

if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    context.fillStyle = 'red';
    context.fillRect(10, 10, 300, 60);
}

注意:这是Need的Jquery

示例:http: //jsfiddle.net/PJqXY/12/

Answer 2

问题137818:大画布不支持包含div的border-radius

我用CSS标签解决了这个问题,父div用于:

transform: translate3d(0,0,0);

它适用于当前的铬版本36.0.1985.143 m

jsfiddle.net/PJqXY/38 /

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    transform: translate3d(0,0,0);
}

Answer 3

Bug 仍然存在 (11/2015)，但另一个解决方法是添加position: relative;到元素中overflow:hidden;。