12

我有一个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），画布在圆角处仍然可见：

在此处输入图像描述

有趣的是，这个问题似乎只发生在内部元素是 a 时canvas。对于任何其他子元素，内容被正确隐藏。

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

另一个应该有效的解决方法是在类似于圆角形状的剪切区域中重新绘制画布，但我更喜欢更干净的 CSS3 解决方案。

那么，有人知道如何在 Mac 上为 Safari 和 Chrome 解决这个问题吗？

编辑：Win7 上的 Chrome 也会出现问题

jsFiddle在这里

4

6 回答 6

10

问题 137818：大画布不支持包含 div 的边框半径

我用CSS标签解决了这个问题到父div：

transform: translate3d(0,0,0);

它适用于当前的 chrome 版本 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);
}
于 2014-08-29T14:10:00.093 回答
6

这是要添加到 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);
}

注意：这个需要的 Jquery

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

于 2012-09-09T03:11:18.063 回答
4

这是我发现的：

在canvas元素中，当widthby的乘积height为66000或更大时，canvas忽略父级的overflow属性。

比如下面一个失败，因为300*220 = 66000

<canvas width="300" height="220"></canvas>

这个工作正常：

<canvas width="300" height="219"></canvas>

在谷歌搜索“canvas 66000”后，我发现了这个错误报告。它与溢出无关，但我确信是同一个错误。

感谢 Jeemusu 为我指明了正确的方向。

于 2012-06-07T09:47:15.073 回答
4

错误仍然存​​在（11/2015），但另一种解决方法是添加position: relative;到overflow:hidden;元素中。

于 2015-11-05T08:54:49.403 回答
3

画布是否必须使用宽度/高度值？如果您将 html 中画布的高度设置为较小的值，或者甚至将所有值一起删除，则它会被正确裁剪（仅在 Chrome 中测试）。

http://jsfiddle.net/LwZ6v/

于 2012-06-07T08:51:30.383 回答
2

我为 Safari 找到了一个 asfwer。将具有单像素 png 的 webkit 蒙版添加到父级，溢出部分的剪辑将呈现良好。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

JsFiddle 示例

于 2014-10-08T08:19:56.093 回答