canvas笔记-closePath函数的使用（含例子）

最新推荐文章于 2024-08-14 07:29:53 发布

IT1995

最新推荐文章于 2024-08-14 07:29:53 发布

阅读量2.3k

点赞数 39

分类专栏： web前端 Web相关技术文章标签： HTML WEB前端

本文链接：https://blog.csdn.net/qq78442761/article/details/106455293

版权

web前端同时被 2 个专栏收录

181 篇文章 6 订阅

订阅专栏

Web相关技术

160 篇文章 8 订阅

订阅专栏

如下代码：

<!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.lineWidth = 10;

        context.beginPath();
        context.moveTo(100, 200);
        context.lineTo(300, 400);
        context.lineTo(100, 600);
        context.strokeStyle = "red";
        context.closePath();
        context.stroke();
    }
</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.lineWidth = 10;

        context.beginPath();
        context.moveTo(100, 200);
        context.lineTo(300, 400);
        context.lineTo(100, 600);
        context.fillStyle = "red";
        context.closePath();
        context.fill();
    }
</script>

</body>
</html>

运行截图如下：