<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制镂空的四边形</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var myCanvas=document.getElementById("canvas");
ctx=myCanvas.getContext("2d");
ctx.beginPath(); //开启新路径,上边的画图与我无关
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.closePath(); //自动闭合
ctx.fillStyle="green";
ctx.moveTo(125,125);
ctx.lineTo(125,175);
ctx.lineTo(175,175);
ctx.lineTo(175,125);
ctx.closePath(); //自动闭合
ctx.fill();
</script>
</body>
</html>
效果图如下:
上边两个四边形绘制,用到了非零环绕规则。
判断某一个区域是否填充,方法如下:
(1)从这个区域任意拉一条直线
(2)看和这条直线相交的轨迹
(3)如果是顺时针轨迹+1
(4)如果是逆时针轨迹 -1
(5)计算所有轨迹的和
(6)如果非0,则填充。
(7)如果是0,则不填充。