0

我需要画一个矩形减去一个圆。如果无法进行圆形剪裁，则多边形剪裁区域可能足以满足我的需要。

如何为 HTML5 Canvas 设置自定义剪辑区域？

4

3 回答 3

1

您应该阅读Canvas 教程中的合成，它解释了如何绘制一个矩形减去一个圆形和类似的图形。

我想你正在寻找destination-out：

在此处输入图像描述

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle = "#09f";
    ctx.fillRect(15,15,70,70);

    ctx.globalCompositeOperation = 'destination-out';

    ctx.fillStyle = "#f30";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

在jsFiddle上查看它的实际效果。

于 2011-08-16T06:41:53.500 回答
0

您也可以使用“剪辑”而不是-“清除”。像这样的东西：

drawRectangle(ctx);
walkCirclePath(ctx);
ctx.clip();
ctx.clear();

但是抗锯齿不能以这种方式工作；

于 2011-08-16T12:02:41.297 回答
0

出色地。那个挺难。

我发现画除圆圈以外的所有地方的最佳解决方案是

c.save();
c.beginPath();
c.moveTo(0, 0);
c.lineTo(x, 0);
c.arc(x, y, 75, - Math.PI / 2, Math.PI * 2 - Math.PI / 2, 1);
c.lineTo(x, 0);
c.lineTo(1000, 0);
c.lineTo(1000, 500);
c.lineTo(0, 500);
c.clip();
c.drawImage(window.tBitmap[0], x - 100, y - 100);
c.restore();

我不敢相信没有更好的解决方案。但它适用于我的需要。

于 2011-08-16T16:05:53.353 回答