canvas07:非零环绕填充规则与绘制一个镂空的正方形

最新推荐文章于 2021-11-15 20:53:15 发布

蜡笔love小新

最新推荐文章于 2021-11-15 20:53:15 发布

阅读量541

点赞数

分类专栏： canvas 文章标签： canvas 前端

本文链接：https://blog.csdn.net/yellowmushroom/article/details/89430009

版权

canvas 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1先绘制一个大的正方形

2绘制一个小的正方形，位于大正方形的中部

3.填充后我们会得到什么图形？

我们接下来试一下：

代码：

<style>
    canvas {
        border: 1px #333 solid;
    }
</style>
<body>
    <!-- 1.定义一个画板 -->
    <canvas id="canvas01" width="400px" height="600px"></canvas>
</body>
</html>
<script>

    var myCanvas = document.getElementById('canvas01');

    var ctx = myCanvas.getContext('2d');
    // 大的正方形、
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.closePath();
    ctx.stroke();
    // 绘制小的正方形
    ctx.moveTo(150,150);
    ctx.lineTo(250,150);
    ctx.lineTo(250,250);
    ctx.lineTo(150,250);
    ctx.closePath();
    // 描边
    ctx.stroke();
    ctx.fill();
</script>

效果：

结果：我们只看到了黑色的大正方形，没有看到小正方形。我们现在逆时针描绘小正方形。

代码：

   // 第二种
    // 大的正方形、
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.closePath();
    ctx.stroke();
    // 绘制小的正方形
    ctx.moveTo(150,150);
    ctx.lineTo(150,250);
    ctx.lineTo(250,250);
    ctx.lineTo(250,150);
    ctx.closePath();
    // 描边
    ctx.stroke();
    ctx.fill();

效果：

我们可以看到，逆时针描绘小正方形，小正方形没有填充颜色，我们得到了一个镂空的正方形。

原因：

非零环绕填充规则：看一块区域是否被填充，可以重这个区域拉一条线出去，看和这条直线相交的轨迹，如果遇到顺时针轨迹加1，如果遇到逆时针轨迹减1，将所以轨迹的值计算出来，如果是非零就填充，如果等于零不填充。

当我们顺时针描绘小正方形时，直线相交的两个点为顺时针，结果为2，填充。逆时针描绘时，直线相交的两个点结果为0，不填充。而大的正方形，直线只相交于大正方形的边，结果为1，填充。

如图：

蜡笔love小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas07:非零环绕填充规则与绘制一个镂空的正方形

1先绘制一个大的正方形2绘制一个小的正方形，位于大正方形的中部3.填充后我们会得到什么图形？我们接下来试一下：代码：<style> canvas { border: 1px #333 solid; }</style><body>  <ca...
复制链接

扫一扫