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)
• 参数说明：它的参数是一个由数字组成的数组，虚线是实虚交替的，这个数组的元素用来描述实边长度和虚边的长度
• 注意：一旦设置成虚线，后面的直线就会继承设置，结果全部绘制成虚线，想要取消，可以重新设置成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