摘月亮的小船儿

切换模式

线段 ​

绘制线段 ​

画线之前你需要知道canvas上下文的以下几个api：

moveTo(x,y) ：定义画线的起始点；

lineTo(x,y) ：定义画线的折点；

stroke() ：通过线条来绘制图形轮廓

示例

js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.moveTo(50, 100) // 起点为(50, 100)
ctx.lineTo(150, 100)
ctx.stroke()
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.moveTo(50, 100) // 起点为(50, 100)
ctx.lineTo(150, 100)
ctx.stroke()

img

绘制多条线段 ​

当然，你也可以同时画多条折线：

示例

js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.moveTo(10, 300)
ctx.lineTo(100, 300)
ctx.lineTo(100, 200)
ctx.lineTo(200, 200)
ctx.lineTo(200, 300)
ctx.lineTo(300, 300)
ctx.lineTo(300, 200)
ctx.lineTo(400, 200)
ctx.lineTo(400, 300)
ctx.lineTo(500, 300)
ctx.stroke()
// 绘制第二条：
ctx.moveTo(100, 400)
ctx.lineTo(500, 500)
ctx.stroke()
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.moveTo(10, 300)
ctx.lineTo(100, 300)
ctx.lineTo(100, 200)
ctx.lineTo(200, 200)
ctx.lineTo(200, 300)
ctx.lineTo(300, 300)
ctx.lineTo(300, 200)
ctx.lineTo(400, 200)
ctx.lineTo(400, 300)
ctx.lineTo(500, 300)
ctx.stroke()
// 绘制第二条：
ctx.moveTo(100, 400)
ctx.lineTo(500, 500)
ctx.stroke()

img

给线段设置样式 ​

strokeStyle = '颜色' ：设置线的颜色；

lineWidth = 数字 ：设置线的宽度；

lineCap = 'round/butt/square' ：设置线帽为圆型/默认/方形；

lineJoin = 'miter/round/bevel' ：设置线段连接处为默认/圆形/平直形式；

globalAlpha = 数字 ：设置图案的透明度

一个简单的示例，设置一条线的线宽：

js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.moveTo(200, 300)
ctx.lineTo(500, 300)
ctx.lineWidth = 10 // 设置线宽为10像素
ctx.stroke()
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.moveTo(200, 300)
ctx.lineTo(500, 300)
ctx.lineWidth = 10 // 设置线宽为10像素
ctx.stroke()

img

提示

这里有一个地方需要注意，就是样式的设置必须写在绘制图形轮廓 stroke() 方法之前！否则会不生效！因为 stroke() 方法是进行绘制，如果已经绘制了再设置线段的样式，自然会不生效

同时画多条线并分别设置样式 ​

beginPath() ：开启一条新路径，生成之后，图形绘制命令会被指向到新路径上；

closePath() ：关闭上一条路径的绘制

在每条路径开始和结束的时候加上这两个方法即可分别设置两条线的样式：

示例

js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(200, 200)
ctx.lineTo(500, 200)
ctx.strokeStyle = 'skyblue' // 设置为天蓝色
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
ctx.closePath()
// 绘制第二条线：
ctx.beginPath()
ctx.moveTo(200, 300)
ctx.lineTo(500, 300)
ctx.strokeStyle = 'red'
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
ctx.closePath()
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(200, 200)
ctx.lineTo(500, 200)
ctx.strokeStyle = 'skyblue' // 设置为天蓝色
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
ctx.closePath()
// 绘制第二条线：
ctx.beginPath()
ctx.moveTo(200, 300)
ctx.lineTo(500, 300)
ctx.strokeStyle = 'red'
ctx.lineWidth = 20
ctx.lineCap = 'round'
ctx.stroke()
ctx.closePath()

img

综合示例

js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(150, 200)
ctx.lineTo(250, 100)
ctx.lineTo(350, 200)
ctx.lineTo(450, 100)
ctx.lineTo(550, 200)
ctx.lineWidth = 20
ctx.strokeStyle = 'skyblue' // 设置颜色为天蓝色
ctx.lineCap = 'round' // 设置线帽为圆形
ctx.lineJoin = 'miter' // 设置线段连接处为默认形式
ctx.stroke()
ctx.beginPath()
ctx.moveTo(150, 350)
ctx.lineTo(250, 250)
ctx.lineTo(350, 350)
ctx.lineTo(450, 250)
ctx.lineTo(550, 350)
ctx.lineWidth = 10
ctx.strokeStyle = 'red' // 设置线段颜色为红色
ctx.lineCap = 'square' // 设置线帽为方形
ctx.lineJoin = 'round' // 设置线段连接处为圆形
ctx.stroke()
ctx.beginPath()
ctx.moveTo(150, 500)
ctx.lineTo(250, 400)
ctx.lineTo(350, 500)
ctx.lineTo(450, 400)
ctx.lineTo(550, 500)
ctx.lineWidth = 30
ctx.strokeStyle = '#a37400' // 设置线段颜色
ctx.lineCap = 'butt' // 设置线帽为默认形式
ctx.lineJoin = 'bevel' // 设置线段连接处为平直的形式
ctx.stroke()
ctx.beginPath()
ctx.arc(350, 300, 300, 0, [(Math.PI) / 180] * 360)
ctx.globalAlpha = 0.3 // 设置圆的透明度为0.3
ctx.fillStyle = 'skyblue'
ctx.fill()
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(150, 200)
ctx.lineTo(250, 100)
ctx.lineTo(350, 200)
ctx.lineTo(450, 100)
ctx.lineTo(550, 200)
ctx.lineWidth = 20
ctx.strokeStyle = 'skyblue' // 设置颜色为天蓝色
ctx.lineCap = 'round' // 设置线帽为圆形
ctx.lineJoin = 'miter' // 设置线段连接处为默认形式
ctx.stroke()
ctx.beginPath()
ctx.moveTo(150, 350)
ctx.lineTo(250, 250)
ctx.lineTo(350, 350)
ctx.lineTo(450, 250)
ctx.lineTo(550, 350)
ctx.lineWidth = 10
ctx.strokeStyle = 'red' // 设置线段颜色为红色
ctx.lineCap = 'square' // 设置线帽为方形
ctx.lineJoin = 'round' // 设置线段连接处为圆形
ctx.stroke()
ctx.beginPath()
ctx.moveTo(150, 500)
ctx.lineTo(250, 400)
ctx.lineTo(350, 500)
ctx.lineTo(450, 400)
ctx.lineTo(550, 500)
ctx.lineWidth = 30
ctx.strokeStyle = '#a37400' // 设置线段颜色
ctx.lineCap = 'butt' // 设置线帽为默认形式
ctx.lineJoin = 'bevel' // 设置线段连接处为平直的形式
ctx.stroke()
ctx.beginPath()
ctx.arc(350, 300, 300, 0, [(Math.PI) / 180] * 360)
ctx.globalAlpha = 0.3 // 设置圆的透明度为0.3
ctx.fillStyle = 'skyblue'
ctx.fill()

img

提示

其实在画第二条线的时候只需要开启 beginPath() 新路径即可，两条线仍然可以分别设置样式，但是为了规范起见，还是建议写上 closePath()