专栏首页Devops专栏Canvas 绘制镂空的正方形 以及 非零环绕填充规则

Canvas 绘制镂空的正方形 以及 非零环绕填充规则

需求

如果需要你使用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>

实现效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas使用beginPath()绘画不同颜色的直线

    从图中可以看到,在每条直线都设置上了颜色和宽度,那么会不会画出三条不同颜色的直线呢?

    Devops海洋的渔夫
  • Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset

    上面绘画了三条平行线设置了末端样式,下面给三条平行线进行打折,使用lineJoin的方式设置拐点的样式。

    Devops海洋的渔夫
  • Canvas使用fill()填充绘画三角形以及使用closepath()解决缺角问题

    出现这个的原因跟前面篇章中说到画线的中轴线位置是在刻度位置的问题一样。那么有没有办法解决这个缺角的问题呢?

    Devops海洋的渔夫
  • 2020最新拼多多Java面试题(现场五面),全面涵盖Java高级到高并发

    以上就是拼多多现场5面题目,希望对你有所帮助,加关注,不迷路,后续再给大家分享BAT面试题的答案!

    Java_老男孩
  • 原创 | 我被面试官给虐懵了,竟然是因为我不懂Spring中的@Configuration

    现在大部分的Spring项目都采用了基于注解的配置,采用了@Configuration 替换标签的做法。一行简单的注解就可以解决很多事情。但是,其实每一个注解背...

    cxuan
  • 我被面试官给虐懵了,竟然是因为我不懂Spring中的@Configuration

    现在大部分的Spring项目都采用了基于注解的配置,采用了@Configuration 替换标签的做法。一行简单的注解就可以解决很多事情。但是,其实每一个注解背...

    格姗知识圈
  • MQTT开源代理Mosquitto源码分析(访问控制篇)

    从GitHub下载源码后,代理的源码在src中,同时还用到了lib库中的一些函数。对项目的工作流程有个大概理解是分析mosquitto的访问控制权限的基础,网络...

    ascii0x03
  • 数据(事件)传递

    在平时的开发中我们都会遇到很多数据传递的例子,在前面的文章中我们接触队夺得就是构造方法属性的传递,但是flutter中并不是只有这一种传递的方法,今天我们就来看...

    flyou
  • Flutter 学习笔记 10 - 路由和导航(2)

    如果要返回数据,pop 方法还有一个重载方法,有个可选的位置参数,用于传递返回的数据。

    七适散人
  • 自定义View时不同构造函数的解释, 言简意赅版

    望天

扫码关注云+社区

领取腾讯云代金券