教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

什么是路径?HTML5的路径有几种状态?

更新时间:2021年03月31日18时31分 来源:传智教育

传智教育-一样的教育,不一样的品质

在画布中绘制的所有图形都会形成路径,通过初始位置和连线端点便会形成一条绘制路径。路径需要通过路径状态进行分割或闭合,来产生不同的路径样式。路径的状态包括重置路径和闭合路径两种,具体介绍如下。

1. 重置路径

在同一画布中,我们添加再多的连线端点也只能有一条路径,如果想要开始新的路径,就需要使用beginPath()方法,当出现beginPath()即表示路径重新开始。示例代码如下。

 <body>

   <canvas id="cas" width="1000" height="300">

     您的浏览器不支持canvas标签。

   </canvas>

   </body>

   </html>

   <script>

     var context = document.getElementById("cas").getContext('2d');

     context.moveTo(10,10);//定义初始位置

    context.lineTo(300,10);//定义连线端点

    context.lineWidth='5';

    context.strokeStyle='#00f';

    context.stroke();//定义描边 

    context.moveTo(10,50);//定义初始位置

    context.lineTo(300,50);//定义连线端点

    context.lineWidth='5';

    context.strokeStyle='#f00';

    context.stroke();//定义描边

  </script>
运行示例代码,效果如图1所示。

线的路径

图 1 设置线条颜色

由于两条线在同一路径中,因此第一条线并没有显示预期的蓝色,而是被红色覆盖。想要让线显示不同的颜色,就需要对路径进行分割。在第13行代码和第14行代码之间添加以下代码。

context.beginPath();//重置路径

运行示例代码,效果如图2所示。

线的路径

图2 设置线条颜色

2. 闭合路径

闭合路径就是将我们绘制的开放路径,进行封闭处理,多点的路径闭合后会形成特定的形状。在画布中,使用closePath()方法闭合路径。例如下面的示例代码片段,用于绘制一条L形的线。

     var context = document.getElementById("cas").getContext('2d');

     context.moveTo(10,10);//定义初始位置

     context.lineTo(10,100);//定义连线端点

     context.lineTo(100,100);//定义连线端点

     context.strokeStyle='#00f';

     context.stroke();//定义描边

运行示例代码,效果如图3所示。

线的路径

图 3 绘制线

图3所示,通过线可以绘制一个L形字母,当我们在第4行代码和第5行代码之间添加closePath()方法,具体代码如下。

context.closePath()//闭合路径

此时刷新页面,路径就会闭合,变为一个直角三角形,如图4所示。

线的路径

图 4 闭合路径




猜你喜欢:

HTML5怎样创建画布?使用画布方法讲解

HTML5画布如何设置线的样式?

哪些浏览器支持HTML5?【web前端培训】

传智教育web前端培训

0 分享到:
和我们在线交谈!