canvas入门线段绘制

41次阅读

共计 1913 个字符，预计需要花费 5 分钟才能阅读完成。

`moveTo`、`lineTo`

使用 canvas 绘制一条线段，默认已经拿到 canvas 的上下文context

绘制一条直线需要使用 context 提供的 moveTo、lineTo 方法

moveTo是线段的起点，lineTo是线段下一个点，最后使用 stroke 进行描边。如下代码

context.moveTo(100,100)
context.lineTo(200,200)
context.stroke()

效果图：

如果一段线段分为多段，可以多次使用 lineTo 方法，将每个顶点都填进去就可以了

context.moveTo(100,100)
context.lineTo(200,200)
context.lineTo(200,400)
context.stroke()

效果图：

`strokeStyle`、`lineWidth`

content还提供了 strokeStyle 和lineWidth两个方法，这两个方法可以的作用是 描边颜色 ， 线宽。

ctx.moveTo(100, 100)
ctx.lineTo(200, 200)
ctx.lineTo(200, 400)
ctx.strokeStyle = 'red'
ctx.lineWidth = 5
ctx.stroke()

效果图

如果我想绘制两条不同的线段呢？使用 moveTo 就能开始新的一条线段绘制

ctx.moveTo(100, 100)
ctx.lineTo(200, 200)
ctx.lineTo(200, 400)
ctx.strokeStyle = 'red'
ctx.lineWidth = 5
ctx.stroke()

ctx.moveTo(300, 100)
ctx.lineTo(400, 200)
ctx.lineTo(400, 400)
ctx.strokeStyle = 'blue'
ctx.lineWidth = 10
ctx.stroke()

效果图：

看到效果图之后，发现和预想的不一样啊，为什么第一段代码没有生效？

这是因为 canvas 是基于状态绘制的，上面一段代码写了 strokeStyle = 'red'，然后stroke 绘制；然后下面开始一段新的线段绘制写了 strokeStyle = 'blue'，在写这句话的时候，已经把上面的red 改成了 blue，使用最后一个stroke 又进行绘制了。

也就是说不管你上面写了多少属性，只要最后一个 stroke 前对属性改动，都会被覆盖。

怎么解决这个问题呢？

`beginPath`、`closePath`

context提供了 beginPath 和closePath，这两个方法是告诉 canvas 我要开始绘制和结束绘制了，你不要给我随便改变属性

ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(200, 200)
ctx.lineTo(200, 400)
ctx.strokeStyle = 'red'
ctx.lineWidth = 5
ctx.closePath()
ctx.stroke()

ctx.beginPath()
ctx.moveTo(300, 100)
ctx.lineTo(400, 200)
ctx.lineTo(400, 400)
ctx.strokeStyle = 'blue'
ctx.lineWidth = 10
ctx.closePath()
ctx.stroke()

效果图：

这里有个比较奇怪的是，最后我没有回到原点呀，为什么最后给我连起来了呢？

这是因为使用了 closePath 这个方法，使用 closePath 时，如果最后一个点没有回到起始位置，它会为你把首尾连接起来。

如果之后想连接起来，可以不用写 closePath，其实，只要写了beginPath，canvas 就已经知道了你要重新绘制新线段了。

ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(200, 200)
ctx.lineTo(200, 400)
ctx.strokeStyle = 'red'
ctx.lineWidth = 5
ctx.stroke()

ctx.beginPath()
ctx.moveTo(300, 100)
ctx.lineTo(400, 200)
ctx.lineTo(400, 400)
ctx.strokeStyle = 'blue'
ctx.lineWidth = 10
ctx.stroke()

效果图：

这里要说明的一点是，写在 stroke 是绘制，stroke上面的那些都是状态，把状态写在 stroke 下面当然是不生效的的。

总结一下：