canvas学习day1——封装绘制矩形函数，非零环绕原则，绘制中空矩阵

最新推荐文章于 2022-09-30 17:23:06 发布

熊熊举高高

最新推荐文章于 2022-09-30 17:23:06 发布

阅读量236

点赞数

文章标签： canvas html5

本文链接：https://blog.csdn.net/weixin_41571938/article/details/115992125

版权

为了方便绘制，会将常用的函数进行封装，后续直接传参调用即可。
ctx.closePath();会将起点和终点连接起来
ctx.lineWidth = lineWidth;线条的粗度

<body>
    <canvas id="cvs"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 封装一个绘制矩形的函数
        function juXing( startX, startY, width, height, lineWidth, strokeStyle ) {

            ctx.moveTo( startX, startY );
            ctx.lineTo( startX + width, startY );
            ctx.lineTo( startX + width, startY + height );
            ctx.lineTo( startX, startY + height );
            ctx.closePath();

            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = strokeStyle;

            ctx.stroke();
        }

        juXing( 10, 10, 60, 60, 4, 'deeppink' );

        // 放了防止重绘之前的路径，所以先把之前的路径清除掉
        ctx.beginPath();
        juXing( 100, 10, 100, 100, 6, 'skyblue' );

        /*
        * 清除当前路径，开启新路径
        * ctx.beginPath()
        * */
    </script>
</body>

非零环绕原则
是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。在路径包围的区域中，随便找一点，向外发射一条射线，和所有围绕它的边相交，然后开启一个计数器，从0计数，如果这个射线遇到顺时针围绕，那么+1，如果遇到逆时针围绕，那么-1，如果最终值非0，则这块区域在路径内。

绘制中空矩阵
效果
在这里插入图片描述
外面的矩形顺时针，里面的矩形逆时针，然后一起填充即可

<body>
    <canvas id="cvs"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 封装一个绘制矩形的函数
        function juXing( startX, startY, width, height, lineWidth, strokeStyle ) {

            ctx.moveTo( startX, startY );
            ctx.lineTo( startX + width, startY );
            ctx.lineTo( startX + width, startY + height );
            ctx.lineTo( startX, startY + height );
            ctx.closePath();

            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = strokeStyle;

            ctx.stroke();
        }

        // 顺时针画一个大矩形
        juXing( 10, 10, 100, 100, 6, 'skyblue' );

        // 逆时针画一个小矩形
        ctx.moveTo( 35, 35 );
        ctx.lineTo( 35, 55 );
        ctx.lineTo( 55, 55 );
        ctx.lineTo( 55, 35 );
        ctx.closePath();

        // 一起填充
        ctx.fill();
    </script>
</body>

熊熊举高高

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas学习day1——封装绘制矩形函数，非零环绕原则，绘制中空矩阵

为了方便绘制，会将常用的函数进行封装，后续直接传参调用即可。ctx.closePath();会将起点和终点连接起来ctx.lineWidth = lineWidth;线条的粗度<body> <canvas id="cvs"></canvas> <script> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d');
复制链接

扫一扫