前端非零环绕规则（例镂空图形）

最新推荐文章于 2024-05-31 14:49:19 发布

小小红色无花果

最新推荐文章于 2024-05-31 14:49:19 发布

阅读量77

点赞数

分类专栏：原生canvas2D 文章标签：前端数学建模

本文链接：https://blog.csdn.net/weixin_45096939/article/details/130877330

版权

原生canvas2D 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

判断一块区域是否填充？

从这个区域拉一条直线，和这条直线相交的轨迹，顺时针+1，逆时针-1，若这条直线轨迹的值相加等于0则不填充，非0则填充。

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="400" height="400"></canvas>
    <script>
        var mycanvas=document.querySelector('canvas')
        var ctx=mycanvas.getContext('2d')
        ctx.moveTo(100,100)
        ctx.lineTo(300,100)
        ctx.lineTo(300,300)
        ctx.lineTo(100,300)
        ctx.closePath()

        ctx.moveTo(150,150)
        ctx.lineTo(150,250)
        ctx.lineTo(250,250)
        ctx.lineTo(250,150)
        ctx.closePath()

        // ctx.stroke()
        ctx.fill()
        
    </script>
</body>
</html>