canvas画布中beginPath和closePath的作用要点

1.画笔画完一个图案后,立即又回到了原点,所以下次如果没有beginPath,就会从原点重新开始

2.beginPath相当于让画笔从原点抬起,重新开始一个新路径,不重复走之前的路径,所以不会覆盖之前的路径

3.closePath相当于让画笔以最近的直线回到原点位置,会有路径

以下案例是画三条不一样的直线:

但是结果却出现了三条一样宽度的直线:宽度都是30

出现这种情况的原因:没有使用beginPath()

使用beginPath后的效果:

使用beginPath的代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div>画三个不一样的直线</div>
        <canvas id="myCanvas" width="500" height="500"> </canvas>
    </body>
    <script>
        var canvas = document.getElementById('myCanvas')
        var ctx = canvas.getContext('2d')
        // lineWidth是改变线条的粗细,默认是一个像素
        ctx.moveTo(20, 50)
        ctx.lineTo(200, 50)
        ctx.lineWidth = 5
        ctx.stroke()
        // ctx.closePath()
        // 1.画笔画完一个图案后,立即又回到了原点,所以下次如果没有beginPath,就会从原点重新开始
        // 2.beginPath相当于让画笔从原点抬起,重新开始一个新路径,不重复走之前的路径,所以不会覆盖之前的路径
        // 3.closePath相当于让画笔以最近的直线回到原点位置,会有路径
        ctx.beginPath()
        ctx.moveTo(20, 100)
        ctx.lineTo(200, 100)
        ctx.lineWidth = 10
        ctx.stroke()
        // ctx.closePath()

        ctx.beginPath()
        ctx.moveTo(20, 150)
        ctx.lineTo(200, 150)
        ctx.lineWidth = 30
        ctx.stroke()
        // ctx.closePath()
    </script>
</html>
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作