专栏首页smh的技术文章canvas绘制图形时beginPath应用

canvas绘制图形时beginPath应用

当我们在使用canvas绘制图形的时候,不免都会使用到beginPath这个方法。今天我们就来讲解一下这个函数的重要性以及应用。

首先我们来看两段代码:

        var ctx = document.getElementById("myCanvas").getContext('2d');
        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(200, 25);
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'green';
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(25,50);
        ctx.lineTo(200, 50)
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'red';
        ctx.stroke();

这段代码非常简单:就是绘制两条线,一条为10px的绿线,一条为2px的红线

然后我们修改一点代码,在运行一次:

        var ctx = document.getElementById("myCanvas").getContext('2d');
        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(200, 25);
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'green';
        ctx.stroke();

        //ctx.beginPath();
        ctx.moveTo(25,50);
        ctx.lineTo(200, 50)
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'red';
        ctx.stroke();

我们这里把第二个beginPath给注释掉了,然后我们在看一下效果如何:

看到这里,大家应该也明白了beginPath的用处了吧,我来简单说一下。

在canvas中的绘制方法中stroke,都会以最近一次的beginPath为绘制路径,当代码调用第一次stroke时,绘制了一条10px的绿线,当调用第二次stroke的时候,由于我把第二个beginPath注释掉了,所以他就会去找上一个beginPath作为绘制路径,所以调用第二次stroke时,就会绘制出两条2px的红线。

看到这里大家明白beginPath的作用了吗。

说到了beginPath,closePath也应该经常使用到吧,这两个并不是搭配使用。

closePath只是将路径起点和终点相连接,不会重新开始一个路径,所以想新建一个路径请使用beginPath。

closePath应用代码:

        var i = 0;
        var c1 = window.setInterval(myFunction, 1000);
        var ctx = document.getElementById("myCanvas").getContext("2d");
        function myFunction() {
            i++;
            console.log(i);
            
            if (i == 1) {
                ctx.moveTo(25, 25);
                ctx.lineTo(150, 25);
            }
            if (i == 2) {
                ctx.lineTo(25, 150);
            }
            if (i == 3) {
                ctx.closePath();//将起点与终点连接,形成三角形
                window.clearInterval(c1);
            }
            ctx.stroke();
        }
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript中的变量提升的简单说明

    两个输出都是undefined。为什么呢?这就要从js中变量的提升和函数作用域来说起了。

    小明爱学习
  • css使用for属性美化radio控件

    我们在使用radio,checkbox等控件的时候,需要对原有的样式进行美化,但是此类控件美化程度有限。

    小明爱学习
  • var和let声明变量时的一些区别

    1.如果在全局作用域中用var声明变量,此变量会默认成为window的一个属性,let声明的变量则不会添加到window对象中。

    小明爱学习
  • 【从前端到全栈】- koa快速入门指南

    随着技术的不断发展,前端工程师也被赋予了越来越多的职责。不再是从前只需要切个图,加个css样式就能完成任务的切图仔了。接下来这篇文章,完成一个简单的登录注册,能...

    用户2356368
  • DartVM服务器开发(第十二天)--Jaguar获取请求内容

    当路径上为参数时,我们可以在参数名前添加:符号,表面该路径上有一个是参数,下面我们请求一下这个地址吧!

    rhyme_lph
  • MarkDown写作上传图床神器picGo原理

    最近朋友推荐了一个用markdown写博客的神器,typora,用了一下,真的是好用到哭,之前是使用的markText,其实也挺好用的,这两个都是开源的,相对来...

    brzhang
  • Koa - 初体验(写个接口)

      这几年node.js确实是越来越火了,好多公司对node.js都开始有要求。虽说前端不一定要会后端,但想要成为一个优秀的前端,node.js是必经之路。

    WahFung
  • curl和https,及openssl

    如果使用curl访问https(注意不是http),则会牵涉到OpenSSL,就需要注意多线程安全问题。 一是OpenSSL需要编译成多线程安全版本,二是...

    一见

扫码关注云+社区

领取腾讯云代金券