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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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笔记-非零环绕原则及剪纸实例

详情内容

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式