非零环绕原则

最新推荐文章于 2020-06-03 10:38:57 发布

Jianxq

最新推荐文章于 2020-06-03 10:38:57 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： canvas 非零环绕原则

本文链接：https://blog.csdn.net/jianxq/article/details/78267666

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

非零环绕原则

canvas绘图中交叉路径的填充问题，依据非零环绕原则，由顺、逆时针穿插次数决定是否填充某一区域

1.非零环绕原则原理

判断有自我交叉情况的路径时，对于路径中的任意给定区域，从该区域内部画一条足够长的线段，使此线段的终点完全落在路径范围之外。然后，初始化计数器为0，每当这条线段与路径上的直线或曲线相交时，就改变计数器的值。如果是与路径的顺时针部分相交，则加1，如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill方法时，浏览器就会对其进行填充。如果最终值时0，那么此区域就不在路径内部，浏览器就不会对其进行填充

这里写图片描述

2.应用实例

绘制镂空矩形，内部矩形和外部矩形绘制路径方向相反，内部矩形不会填充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
<canvas width="600" height="400" id='cas'></canvas>

<script>
  // 获取元素
  var cas = document.getElementById( "cas" );
  // 获取绘图上下文
  var ctx = cas.getContext( '2d' );

  // 绘制镂空矩形
  // 里面顺时针, 外面逆时针就可以实现

  // 外部方形 逆时针
  ctx.moveTo( 100, 100 )
  ctx.lineTo( 100, 300 )
  ctx.lineTo( 300, 300 )
  ctx.lineTo( 300, 100 )
  ctx.closePath();

  // 内部方形 顺时针
  ctx.moveTo( 150, 150 );
  ctx.lineTo( 250, 150 );
  ctx.lineTo( 250, 250 );
  ctx.lineTo( 150, 250 );
  ctx.closePath();

  ctx.fill();

</script>
</body>
</html>