使用< canvas>标签我需要能够在多边形中绘制一个洞.
现在我有一些非常简单的东西,使用beginPath()然后为每个点执行lineto().然后填充fill().
我看不到有任何方法可以填充多边形和未填充的中间,就像甜甜圈一样.
我不是做甜甜圈,但它适合这个例子.
有什么我想念的吗？
我宁愿不画它完全填充然后必须重绘中间.
解决方法
这就是我的工作：
var ctx = canvas.getContext("2d");
ctx.beginPath();
//polygon1--- usually the outside polygon,must be clockwise
ctx.moveto(0,0);
ctx.lineto(200,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,10);
ctx.closePath();
// add as many holes as you want
ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "rgba(0.5,0.5,0.5)";
ctx.linewidth = 1;
ctx.fill();
ctx.stroke();
这里的主要思想是你只能使用一次;外部多边形必须是顺时针方向,孔必须是逆时针方向.