0

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

然后我在画布的 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 中设置宽度而不是元素不起作用）。我将如何修复我的画布元素以显示为一个不允许在圆圈外绘制的圆圈（或者如果在圆圈外绘制，至少不会出现在用户面前）。

4

2 回答 2

3

Use the circle to create a "clipping path" for all subsequent drawing actions.

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();

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

Note that there's a bug in Chrome which prevents the clipping mask edge from being antialiased, although it seems that your border-radius hack prevents that from looking as bad as it might.

于 2013-04-29T15:47:04.367 回答
0

Try using a clipping mask:

ctx.beginPath();
ctx.arc(150,150,150,0,360,false);
ctx.clip();
于 2013-04-29T15:47:14.400 回答