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 ライオン (私は Safari 5.1.5 と Chrome 19 をテストしました) で実行されている Webkit ブラウザーの場合、キャンバスはまだ丸い角に表示されます。

ここに画像の説明を入力

興味深いことに、この問題は内部要素が の場合にのみ発生するようcanvasです。その他の子要素の場合、コンテンツは正しく非表示になります。

1 つの回避策は、キャンバス自体に同じ丸みを帯びた角を適用することですが、キャンバスの相対位置をアニメートする必要があるため、残念ながらこれは不可能です。

機能するはずの別の回避策は、角の丸い形状に似た切り取られた領域でキャンバスを再描画することですが、よりクリーンな CSS3 ソリューションをお勧めします。

それで、Mac上のSafariとChromeでこれを修正する方法を知っていますか?

編集：Win7のChromeでも問題が発生します

ここでjsFiddle

4

6 に答える 6

10

問題 137818: 大きなキャンバスで div の境界線半径が考慮されない

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);
}
于 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

バグはまだ存在します (2015 年 11 月) が、別の回避策は要素に追加position: relative;することです。overflow:hidden;

于 2015-11-05T08:54:49.403 に答える
4

これは私が見つけたものです：

widthcanvas 要素では、 byの乗算heightが 66000 以上の場合、キャンバスは親のオーバーフロー プロパティを無視します。

たとえば、次の例は 300*220 = 66000 であるため失敗します。

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

これはうまくいきます：

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

「canvas 66000」をグーグルで検索した後、このバグレポートを見つけました。オーバーフローとは関係ありませんが、同じバグだと思います。

正しい方向に向けてくれたJeemusuに感謝します。

于 2012-06-07T09:47:15.073 に答える
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 に答える