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

Question

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

然后我在画布的ID上设置border-radius，使画布看起来像一个圆圈。

但是，如果我在圆圈区域之外绘制某些内容，它仍会绘制它，如我的示例代码所示： 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转换应用到canvas元素的东西，因为它不会知道它们（即在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黑客似乎可以防止它看起来像它那样糟糕。

Answer 2

尝试使用剪贴蒙版：

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