canvas学习之线条的样式

复习

之前我们学习过绘制线条使用stroke()，绘制填充图形使用fill()。给绘制的图形上色使用fillStyle。还学过绘制各种各样的形状。

学习

这一节，我们学习给线条添加样式。

  • 线条的宽度

    通过lineWidth来设置线条的宽度。范围时大于0.

  • 线条末端样式

    通过lineCap来设置线条的末端样式，一共有三个值

    • butt 正常的方形结束

    • round 以圆形结束，线条长度会多出线条宽度的一半

    • square以正常的方形结束，线条长度会多出线条宽度的一半

      如下：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      <canvas width="500" height="500" id="mycanvas"></canvas>
      <script>
        canvas = document.getElementById('mycanvas')
        let ctx = canvas.getContext('2d')
        ctx.beginPath()
        ctx.moveTo(10, 50)
        ctx.lineWidth = 100
        ctx.lineCap = 'square'
        ctx.lineTo(400, 50)
        ctx.stroke()
        ctx.closePath()

        ctx.beginPath()
        ctx.moveTo(10, 170)
        ctx.lineWidth = 100
        ctx.lineCap = 'butt'
        ctx.lineTo(400, 170)
        ctx.stroke()
        ctx.closePath()



        ctx.beginPath()
        ctx.moveTo(10, 290)
        ctx.lineWidth = 100
        ctx.lineCap = 'round'
        ctx.lineTo(400, 290)
        ctx.stroke()
        ctx.closePath()
      </script>

  • 险段交界处的样式通过lineJoin()来设置

    • round 交界处呈圆形
    • bevel 交界处的三角形被删去了角
    • miter 默认模式，尖尖的角

  • 虚线

    截止目前，我们画的都是实现，如果想画虚线，大概是要画很多条线段了，实际上不用这么麻烦，有现成的方法帮我们解决这个问题。

    • setLineDash([num1, num2, num3]) 。如果我们把虚线中的每一个点和空白部分都当作一个部分的话，他们会按照数组里的数传递下去，一直到终点。

      比如：

      1
      2
      ctx.setLineDash([1,2,3,4])

      首先会出现一个单位为1的有色块，接着是单位为2的无色块，接着单位为3的有色块····

      例如：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <canvas width="500" height="500" id="mycanvas"></canvas>
      <script>
        canvas = document.getElementById('mycanvas')
          let ctx = canvas.getContext('2d')
          ctx.beginPath()
          ctx.moveTo(0, 50)
          ctx.lineWidth = 10
          ctx.setLineDash([10, 20, 30])
          ctx.lineTo(500, 50)
          ctx.stroke()
          ctx.closePath()
      </script>

  • 对虚线开始位置进行位移使用属性lineDashOffset

    lineDashOffset的值如果为正，向左移动，为负向右移动。快在上面的例子中移动试一下吧。

到现在，如何关于图形绘制的各种基本知识我们基本上都学了，下一节开始，我们学习如何在canvas上写字。