中间有洞的多边形，带有 HTML5 的画布
使用 <canvas> 标签我需要能够在多边形中绘制一个洞.
Using the <canvas> tag I need to be able to draw a hole in a polygon.
现在我有一些非常简单的方法，它使用 beginPath() 然后为每个点执行 lineTo().然后用 fill() 填充.
Right now I have something very simple that uses beginPath() then does lineTo() for each point. It is then filled with fill().
我看不出有什么方法可以让一个填充的多边形中间没有填充，就像一个甜甜圈.我不是在做甜甜圈，但它适合这个例子.
I cannot see any way to have a filled polygon with a unfilled middle though, like a donut. I'm not making a donut but it is suitable for this example.
我有什么遗漏吗?我宁愿不把它画满，然后不得不重画中间.
Is there something I am missing? I would rather not draw it fully filled then have to redraw the middle.
推荐答案
这是我做的:
var ctx = canvas.getContext("2d");
ctx.beginPath();
//polygon1--- usually the outside polygon, must be clockwise
ctx.moveTo(0, 0);
ctx.lineTo(200, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.lineTo(0, 0);
ctx.closePath();
//polygon2 --- usually hole,must be counter-clockwise
ctx.moveTo(10, 10);
ctx.lineTo(10,100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 10);
ctx.lineTo(10, 10);
ctx.closePath();
// add as many holes as you want
ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "rgba(0.5,0.5,0.5,0.5)";
ctx.lineWidth = 1;
ctx.fill();
ctx.stroke();
这里的主要思想是你只能使用一次 beginPath；外部多边形必须是顺时针方向，孔必须是逆时针方向.
The main idea here is you can only use beginPath once; the outside polygon must be clockwise and holes must be counter-clockwise.
相关文章