前端基础学习之h5-canvas中的非零环绕规则

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

Endless Daydream233

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

阅读量171

点赞数

分类专栏：前端学习基础记录文章标签： canvas html5 html

本文链接：https://blog.csdn.net/gua222/article/details/112370848

版权

前端学习基础记录专栏收录该内容

57 篇文章 7 订阅

订阅专栏

最近在看canvas,canvas在对某一区域进行填充操作的时候，根据非零环绕规则来判断是否填充。
具体怎么判断一块区域是否填充呢？

1.从这个区域拉一条直线
2.看和这条直线相交的轨迹
3.如果是顺时针轨迹 +1
4.如果是逆时针轨迹 -1
5.所有的值相加
6.如果是非0 那么就填充
7.如果是0 那么就不填充

具体示意图1：
在这里插入图片描述
具体示意图2：

简单案例：canvas描绘镂空正方形
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{
            border: 1px solid #A6BE39;
        }
    </style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>
    let myCanvas=document.querySelector('canvas');
    let ctx=myCanvas.getContext('2d');

    //====================全黑的效果============================
    //画一个大的正方形300
    // ctx.moveTo(100,100);
    // ctx.lineTo(400,100);
    // ctx.lineTo(400,400);
    // ctx.lineTo(100,400);
    // ctx.closePath();
    //
    // //一个小的正方形200
    // ctx.moveTo(200,200);
    // ctx.lineTo(300,200);
    // ctx.lineTo(300,300);
    // ctx.lineTo(200,300);
    // ctx.closePath();
    // ctx.fill();
    //=========================================================

    //=====================外黑里绿===========================
    //画一个大的正方形300
    /*ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(400,100);
    ctx.lineTo(400,400);
    ctx.lineTo(100,400);
    ctx.closePath();
    ctx.fill();

    //一个小的正方形200
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(300,200);
    ctx.lineTo(300,300);
    ctx.lineTo(200,300);
    ctx.closePath();
    // ctx.stroke();
    ctx.fillStyle="#39BE93";
    ctx.fill();*/
    //=====================================================


    //===========通过非零环绕规则设置镂空正方形================
    ctx.moveTo(100,100);
    ctx.lineTo(400,100);
    ctx.lineTo(400,400);
    ctx.lineTo(100,400);
    ctx.closePath();

    //一个小的正方形200
    ctx.moveTo(200,200);
    ctx.lineTo(200,300);
    ctx.lineTo(300,300);
    ctx.lineTo(300,200);
    ctx.closePath();
    ctx.fillStyle="#39BE93";
    ctx.fill();
    //======================================================

    //什么是非零环绕原则?
    //判断一块区域是否填充
    //1.从这个区域拉一条直线
    //2.看和这条直线相交的轨迹
    //3.如果是顺时针轨迹 +1
    //4.如果是逆时针轨迹 -1
    //5.所有的值相加
    //6.如果是非0 那么就填充
    //7.如果是0 那么就不填充
</script>
</body>
</html>

Endless Daydream233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习之h5-canvas中的非零环绕规则

最近在看canvas,canvas在对某一区域进行填充操作的时候，根据非零环绕规则来判断是否填充。具体怎么判断一块区域是否填充呢？1.从这个区域拉一条直线2.看和这条直线相交的轨迹3.如果是顺时针轨迹 +14.如果是逆时针轨迹 -15.所有的值相加6.如果是非0 那么就填充7.如果是0 那么就不填充具体示意图1：具体示意图2：简单案例：canvas描绘镂空正方形<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫