将画布设置为“圆圈” - 不允许在圆圈之外绘制任何内容

Question

我创建了一个画布元素并设置了它的宽度和高度。

然后我在画布的 ID 上设置了边框半径，使画布看起来像一个圆圈。

但是，如果我在圆圈区域之外绘制一些东西，它仍然会绘制它，如我的示例代码所示： http://jsfiddle.net/mN9Eh/

JavaScript：

<script>
function animate() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    ctx.save();
    ctx.clearRect(0, 0, c.width, c.height);

    if(i > 80) {
        i = 1;
    }

    if( i > 40) {
        ctx.beginPath();
        ctx.arc(50, 50, i-40, 0, 2 * Math.PI, true);
        ctx.fillStyle = "#FF0033";
        ctx.fill();
    }

    i++;

    ctx.restore();

    setTimeout(animate, 10);
}

var i = 0;
animate();
</script>

CSS ：

#myCanvas {
    background: #333;
    border-radius: 300px;
}

HTML：

<canvas id="myCanvas" width="300" height="300"></canvas>

我记得读过一些你不能将 CSS 转换应用于画布元素的东西，因为它不会知道它们（即在 CSS 中设置宽度而不是元素不起作用）。如何修复我的画布元素以显示为一个不允许在圆圈外绘制的圆圈（或者如果在圆圈外绘制，至少不会向用户显示）。

Answer 1

使用圆圈为所有后续绘图操作创建“剪切路径”。

var cx = c.width / 2;
var cy = c.height / 2;
var r = Math.min(cx, cy);
ctx.beginPath();
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();

见http://jsfiddle.net/alnitak/MvSB2/

请注意，Chrome 中有一个错误会阻止剪贴蒙版边缘被抗锯齿，尽管您的 border-radius hack 似乎阻止了它看起来尽可能糟糕。

Answer 2

尝试使用剪贴蒙版：

ctx.beginPath();
ctx.arc(150,150,150,0,360,false);
ctx.clip();