首页 > 其他 > 详细

canvas(二)直线样式和虚线

时间:2019-10-09 00:06:40      阅读:183      评论:0      收藏:0      [点我收藏+]

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

<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

技术分享图片

canvas(二)直线样式和虚线

原文:https://www.cnblogs.com/OrochiZ-/p/11638804.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!