javascript - 角が丸い HTML5 キャンバス

Question

角の丸い HTML5 キャンバスが欲しいです。CSS プロパティborder-radius: 15pxを使用して角を丸めています。

でも、キャンバスの隅に何かを描くときは、隅に描くことができます。

はじめに:

私が持っているもの：

私が欲しいもの：

それを回避する解決策はありますか？マスクを作成しようと思ったのですが、やり方がよくわかりません。参考までに、これは Firefox では機能しますが、Chrome/Safari/Opera では機能しません。

これは小さな例です:

http://jsfiddle.net/XYHpJ/

ありがとう！

Answer 1

この例を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);
}

Answer 2

これを回避する最善の方法は<canvas>、「c​​ontainer」タグの内側に挿入して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/

Allendardisplay: block;がコメントで提案したように、ラッパーを使用して取り除くこともできます。