canvas笔记-非零环绕原则及剪纸实例

首先提下非零环绕原则，如下图：

这里如上面的图，这个非零环绕和画图的方向有关！

如+1要染色的地方，在这里找一个点射向外边，如果相交的地方画图方向和射线方向一样就是+1，要染色。

+2那个地方，也是那样。

0为不染色，因为一个+1一个-1，只要不是0就要染色，这就是非零环绕原则。

下面给出两个实例

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.beginPath();
        context.arc(400, 400, 300, 0, Math.PI * 2, false);
        context.arc(400, 400, 150, 0, Math.PI * 2, true);

        context.fillStyle = "#058";
        context.shadowColor = "gray";
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
        context.shadowBlur = 10;
        context.fill();
    }

</script>

</body>
</html>

第二个实例运行截图如下；

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.beginPath();
        context.rect(100, 100, 600, 600);
        pathRect(context, 200, 200, 400, 200);
        pathTriangle(context, 300, 450, 150, 650, 450, 650);
        context.arc(550, 550, 100, 0, Math.PI * 2, true);
        context.closePath();

        context.fillStyle = "#058";
        context.shadowColor = "gray";
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
        context.shadowBlur = 10;
        context.fill();
    }

    function pathRect(cxt, x, y, width, height){

        cxt.moveTo(x, y);
        cxt.lineTo(x, y + height);
        cxt.lineTo(x + width, y + height);
        cxt.lineTo(x + width, y);
        cxt.lineTo(x, y);
    }

    function pathTriangle(cxt, x1, y1, x2, y2, x3, y3){

        cxt.moveTo(x1, y1);
        cxt.lineTo(x2, y2);
        cxt.lineTo(x3, y3);
        cxt.lineTo(x1, y1);
    }

</script>

</body>
</html>

canvas笔记-非零环绕原则及剪纸实例

猜你喜欢