Canvas Canvas开始新路径(beginPath())

最新推荐文章于 2024-04-08 20:58:26 发布

houyanhua1

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量763

点赞数

分类专栏： Canvas 文章标签： canvas 开始路径 beginPath

本文链接：https://blog.csdn.net/houyanhua1/article/details/79877246

版权

本文将介绍HTML5 Canvas中的beginPath()方法，该方法用于开始一个新的路径，清除当前路径。通过实例代码演示其用法，帮助理解Canvas绘图路径的管理。

摘要由CSDN通过智能技术生成

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

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

        // 封装一个绘制矩形的函数
        function juXing( startX, startY, width, height, lineWidth, strokeStyle ) {
	        // 放了防止重绘之前的路径，所以先把之前的路径清除掉。开始新的路径
	        ctx.beginPath();

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

最低0.47元/天解锁文章

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas Canvas开始新路径(beginPath())

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &am
复制链接

扫一扫

专栏目录