Canvas的fill方法之“非零环绕原则nonzero”与“奇
2017-04-07 本文已影响1061人
多小啦
我们一般使用Canvas的fill方法时，是直接进行填充路径。
CanvasRenderingContext2D.fill()
其实fill方法有两个参数可选：nonzero | evenodd ，“nonzero”是非零环绕原则，也是默认值，“evenodd”为奇偶原则。
1 非零环绕原则nonzero
1.1 使用规则
是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
* 在路径包围的区域中，随便找一点，向外发射一条射线，
* 和所有围绕它的边相交，
* 然后开启一个计数器，从0计数，
* 如果这个射线遇到顺时针围绕，那么+1，
* 如果遇到逆时针围绕，那么-1，
* 如果最终值非0，则这块区域在路径内。
1.2 举个栗子
如何实现下面图片的效果？
实现起来非常容易，保证外层正方形是顺时针，内层正方形逆时针，或者外层正方形是逆时针，内层正方形顺时针即可。
下载 (2).png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>曾小小晨的页面</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var ctx = document.getElementById( 'canvas' ).getContext( '2d' );
var w = canvas.width,
h = canvas.height;
var x = w / 2,
y = h / 2;
var inner = 80;
var outer = 200;
ctx.moveTo( x - inner / 2, y - inner / 2 );
ctx.lineTo( x + inner / 2, y - inner / 2 );
ctx.lineTo( x + inner / 2, y + inner / 2 );
ctx.lineTo( x - inner / 2, y + inner / 2 );
ctx.closePath();
ctx.moveTo( x - outer / 2, y - outer / 2 );
ctx.lineTo( x - outer / 2, y + outer / 2 );
ctx.lineTo( x + outer / 2, y + outer / 2 );
ctx.lineTo( x + outer / 2, y - outer / 2 );
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
2 奇偶原则evenodd
2.1 使用规则
* 在路径包围的区域中，随便找一点，向外发射一条射线，
* 和所有围绕它的边相交，
* 查看相交线的个数，如果为奇数，就填充，如果是偶数，就不填充。
1.2 举个栗子
绘制一个正五角星，5个角填充颜色，中间部分不填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>曾小小晨的页面</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="cvs" width="800" height="600"></canvas>
<script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
var w = cvs.width,
h = cvs.height;
var x = w / 2,
y = h / 2,
r = 200,
start = -Math.PI / 2,
end = Math.PI * 3 / 2;
ctx.arc(x, y, r, start, end);
ctx.fillStyle = '#D43D59';
ctx.fill();
ctx.beginPath();
ctx.moveTo(x, y - r);
// 顶点连下左
ctx.lineTo(x - r * Math.sin(Math.PI / 5), y + r * Math.cos(Math.PI / 5));
// 下左连上右
ctx.lineTo(x + r * Math.cos(Math.PI / 10), y - r * Math.sin(Math.PI / 10));
// 上右连上左
ctx.lineTo(x - r * Math.cos(Math.PI / 10), y - r * Math.sin(Math.PI / 10));
// 上左连下右
ctx.lineTo(x + r * Math.sin(Math.PI / 5), y + r * Math.cos(Math.PI / 5));
ctx.fillStyle = '#246AB2';
// fill填充规则---奇偶原则
ctx.fill('evenodd');
实现效果
下载 (1).png
