javascript - 将 Canvas 设置为 "circle"- 不允许在圆圈外绘制任何内容

Question

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

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

但是，如果我在圆形区域之外绘制一些东西，它仍会绘制它，如我的示例代码所示: 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 中设置宽度而不是在元素中设置宽度不正确)。我将如何修复我的 Canvas 元素以显示为不允许在圆圈外绘制的圆圈(或者如果在圆圈外绘制至少不会向用户显示)。

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 似乎阻止了它看起来尽可能糟糕。