非零环绕原则

来源：互联网发布：音频合并时间软件编辑：程序博客网时间：2024/06/07 05:23

非零环绕原则

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>

代码及相关文件详见GitHub主页 绘制镂空矩形-非零环绕原则

https://github.com/Jianxq12/ITcast/tree/master/Canvas

阅读全文

0 0