canvas(二)直線樣式和虛線

###1.設置直線線帽的樣式 ctx.lineCap用來設置直線線帽的樣式，他有如下3個值： butt：默認 round：圓形線帽 square：正方形線帽

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 默認的直線
    ctx.moveTo(50,50)
    ctx.lineTo(250,50)
    ctx.lineWidth = 30
    ctx.stroke()

    // .lineCap = butt
    ctx.beginPath()
    ctx.moveTo(50,100)
    ctx.lineTo(250,100)
    ctx.strokeStyle = "yellow"
    ctx.lineCap = "butt"
    ctx.stroke()

    // .lineCap = round
    ctx.beginPath()
    ctx.moveTo(50,150)
    ctx.lineTo(250,150)
    ctx.strokeStyle = "red"
    ctx.lineCap = "round"
    ctx.stroke()

    // .lineCap = square
    ctx.beginPath()
    ctx.moveTo(50,200)
    ctx.lineTo(250,200)
    ctx.strokeStyle = "blue"
    ctx.lineCap = "square"
    ctx.stroke()
</script>

###2.設置直線的拐點樣式 ctx.lineJoin用來設置直線的拐點樣式，他有3個可能的值： miter：尖的 round：圓的 bevel：平的

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 默認的直線
    ctx.moveTo(50,100)
    ctx.lineTo(200,50)
    ctx.lineTo(350,100)
    ctx.lineWidth = 30
    ctx.stroke()

    // lineJoin = "miter"
    ctx.beginPath()
    ctx.moveTo(50,150)
    ctx.lineTo(200,100)
    ctx.lineTo(350,150)
    ctx.strokeStyle = "yellow"
    ctx.lineJoin = "miter"
    ctx.stroke()

    // lineJoin = "round"
    ctx.beginPath()
    ctx.moveTo(50,200)
    ctx.lineTo(200,150)
    ctx.lineTo(350,200)
    ctx.strokeStyle = "red"
    ctx.lineJoin = "round"
    ctx.stroke()

    // lineJoin = "bevel"
    ctx.beginPath()
    ctx.moveTo(50,250)
    ctx.lineTo(200,200)
    ctx.lineTo(350,250)
    ctx.strokeStyle = "blue"
    ctx.lineJoin = "bevel"
    ctx.stroke()
</script>

###3.繪製虛線 setLineDash(arr)：繪製虛線 他的參數是一個數組，數組元素是數字。虛線是實虛交替的，這個數組的元素用來描述實邊長度和虛邊的長度。

我的理解： 繪製的直線由實線和虛線交替組成，可是虛線的默認長度爲0，因此默認的直線是實線。 想要繪製虛線，就要調用setLineDash(arr)設置虛線的寬度>0 一旦設置成虛線，後面的直線就會繼承設置，結果所有繪製成虛線，想要取消，能夠從新設置成setLineDash([1,0])

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 默認直線繪製成實線
    ctx.moveTo(50,50)
    ctx.lineTo(300,50)
    ctx.lineWidth = 3
    ctx.stroke()

    // 虛線長度爲0則繪製成實線
    ctx.beginPath()
    ctx.moveTo(50,100)
    ctx.lineTo(300,100)
    ctx.setLineDash([1,0])
    ctx.stroke()

    // 設置虛線長度大於0
    ctx.beginPath()
    ctx.moveTo(50,150)
    ctx.lineTo(300,150)
    ctx.setLineDash([5,10])
    ctx.stroke()
</script