Canvas 绘制镂空的正方形 以及 非零环绕填充规则
Canvas 绘制镂空的正方形 以及 非零环绕填充规则
Devops海洋的渔夫
发布于 2020-01-15 16:21:07
发布于 2020-01-15 16:21:07
需求
如果需要你使用Canvas去绘画一个镂空的正方形，你会怎么画？图形如下：
绘画的方法一： 画四条线，然后设置线的宽度很宽，组合为一个镂空的正方形。 绘画的方法二： 画两个嵌套的正方形，采用非零环绕填充规则进行颜色的填充。
上面这两种方法肯定是第二种更加优化，不过这第二种需要理解非零环绕填充规则。下面先来演示这两个方法。
方法一：画四条线，设置线的宽度很宽，组合为一个镂空的正方形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');
context.moveTo(100,100); // 起点
context.lineTo(200,100); // 第一条线
context.lineTo(200,200); // 第二条线
context.lineTo(100,200); // 第三条线
context.closePath(); // 结束路径，自动闭合
/*描边*/
context.lineWidth = 50;
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>绘画图形如下：
这样的确可以绘画，不过如何绘画更加复杂的镂空图形就非常困难了，例如下面这种图形。
如果要绘画蓝色填充颜色，部分镂空的图形，这样设置粗线条的绘画方式就没法简单实现了。
那么此时就要使用非零环绕的规则。
非零环绕规则
非零环绕规则是从填充的位置拉出一条线，基于绘画线条的顺时针与逆时针相差计算，判断是否需要填充数据。 如果从内部拉出线的经过的所有轨迹，顺时针方向加1，逆时针方向减1，最后将所有经过的轨迹相加，计算出来的值为0，则不填充颜色。反之，计算出来的值不为0，则填充颜色。
图例如下：
理解了非零环绕规则之后，下面来再画一个镂空的正方形。
方法二： 画两个嵌套的正方形，采用非零环绕填充规则进行颜色的填充
画一个顺时针外部的正方形，再画一个逆时针方向的正方形，从内部拉一条线，那么内部经过总轨迹的值则为零，那么此时内部则不填充颜色。
下面来看代码实现，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');
/*绘画顺时针外部正方形*/
context.moveTo(100,100); // 起点
context.lineTo(300,100); // 第一条线
context.lineTo(300,300); // 第二条线
context.lineTo(100,300); // 第三条线
context.closePath(); // 结束路径，自动闭合
/*绘画逆时针内部正方形*/
context.moveTo(250,150); // 起点
context.lineTo(150,150); // 第一条线
context.lineTo(150,250); // 第二条线
context.lineTo(250,250); // 第三条线
context.closePath(); // 结束路径，自动闭合
/*填充颜色*/
context.fill();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>实现效果如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录