HTML宝典(第 1 版)
4.2.2 绘制线段
阅读(

HTML基础

HTML元素

表单及应用

Canvas绘图基础

基本用法

使用路径

如何使用路径

绘制线段

调用lineTo()方法绘制线段。lineTo(x, y)方法把当前点和lineTo()方法指定的点(x, y)用线段连接起来。

如果要绘制多条线段,可以重复调用该方法。第一次调用,当前点为子路径的起点,以后每次调用,都会把上一次的终点作为本次的起点。我们使用lineTo()方法绘制两条平行线,代码如下:

context.lineWidth = 10;
context.strokeStyle = '#444';
      
context.beginPath();
context.moveTo(20, 20);
context.lineTo(220,20);     
context.stroke();
      
context.beginPath();
context.moveTo(20, 40);
context.lineTo(220,40);
context.stroke();

运行效果如图 4‑5 所示:

绘制线段
图4-5 绘制线段

说明:

调用stroke()方法绘制封闭图形时,closePath()方法就显得尤为重要。在线条比较细的时候,还不易觉察,在线条比较粗的时候,就会看到,在路径的起点和终点交汇留下的缺口。如果删除上述代码的context.closePath(),就会一目了然看到这个缺口。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验