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>

 

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值