html画圆圈原理,【已解决】HTML中用Canvas画圆圈

折腾：

【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图

期间，再去canvas中圆圈

如图：

希望画出大大小小的各种圆圈

包括圆圈里面还带东西的。ctx.lineWidth = 1

ctx.beginPath()

ctx.arc(LeftLineXHalf, TopLineY + 20, 5, -Math.PI, Math.PI, false)

ctx.stroke()

ctx.fillText('18-1#杆', LeftLineXHalf + 10, TopLineY + 25)

ctx.beginPath()

ctx.arc(LeftLineXHalf, TopLineY + 40, 5, -Math.PI, Math.PI, false)

ctx.stroke()

ctx.fillText('18-1-1#杆', LeftLineXHalf + 10, TopLineY + 45)

效果：

再去画更多的圆圈

【总结】

目前用代码：const canvas = document.getElementById('controlPanel')

if (canvas.getContext) {

// 获得 2d 上下文对象

const ctx = canvas.getContext('2d')

const LineColor = 'red'

const TextColor = 'white'

const TopLineY = 30

const TopTextY = 20

const MainLineWidth = 5

const SecondaryLineWidth = MainLineWidth / 2

const LeftLineX0 = 50

const LeftLineX1 = 130

const LeftLineXHalf = (LeftLineX0 + LeftLineX1) / 2

const UpHalfHeight = 220

const MiddleLeftLineX0 = 230

const MiddleLeftLineX1 = 400

const MiddleLeftXHalf = (MiddleLeftLineX0 + MiddleLeftLineX1) / 2

const MiddleLeftLineHeight = UpHalfHeight / 5

// ctx.fillStyle = 'rgb(200,0,0)'

// // 绘制矩形

// ctx.fillRect(10, 10, 55, 50)

// ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'

// ctx.fillStyle = 'black'

// ctx.fillRect(0, 0, canvas.width, canvas.height)

// // Add behind elements.

// // ctx.globalCompositeOperation = 'destination-over'

// ctx.globalCompositeOperation = 'destination-out'

// ctx.fillStyle = 'green'

// ctx.fillStyle = 'red'

// ctx.strokeStyle = 'green'

ctx.strokeStyle = LineColor

ctx.lineWidth = MainLineWidth

ctx.textAlign = 'start'

ctx.beginPath() // 新建一条path

ctx.moveTo(LeftLineX0, TopLineY) // 把画笔移动到指定的坐标

ctx.lineTo(LeftLineX1, TopLineY) // 绘制一条从当前位置到指定坐标(200, 50)的直线

ctx.closePath() // 闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做

ctx.moveTo(MiddleLeftLineX0, TopLineY)

ctx.lineTo(MiddleLeftLineX1, TopLineY)

ctx.closePath()

ctx.moveTo(500, TopLineY)

ctx.lineTo(600, TopLineY)

ctx.closePath()

ctx.moveTo(650, TopLineY)

ctx.lineTo(850, TopLineY)

ctx.closePath()

ctx.stroke() // 绘制路径

ctx.fillStyle = TextColor

// ctx.strokeStyle = 'green'

// ctx.lineWidth = 10

ctx.lineWidth = 1

ctx.font = '14px 宋体'

// ctx.strokeText('进线', 270, TopTextY)

ctx.fillText('进线', 270, TopTextY)

ctx.fillText('计量柜', 330, TopTextY)

ctx.fillText('变压器柜', 490, TopTextY)

ctx.fillText('低压总柜', 560, TopTextY)

ctx.fillText('电容柜', 720, TopTextY)

ctx.lineWidth = SecondaryLineWidth

ctx.moveTo(LeftLineXHalf, TopLineY)

ctx.lineTo(LeftLineXHalf, TopLineY + UpHalfHeight)

ctx.closePath()

ctx.stroke()

ctx.moveTo(MiddleLeftXHalf, TopLineY)

ctx.lineTo(MiddleLeftXHalf, TopLineY + MiddleLeftLineHeight)

ctx.closePath()

ctx.stroke()

ctx.lineWidth = 1

ctx.beginPath()

ctx.arc(LeftLineXHalf, TopLineY + 20, 5, -Math.PI, Math.PI, false)

ctx.stroke()

ctx.textAlign = 'start'

ctx.fillText('18-1#杆', LeftLineXHalf + 10, TopLineY + 25)

ctx.beginPath()

ctx.arc(LeftLineXHalf, TopLineY + 40, 5, -Math.PI, Math.PI, false)

ctx.stroke()

ctx.textAlign = 'start'

ctx.fillText('18-1-1#杆', LeftLineXHalf + 10, TopLineY + 45)

ctx.strokeStyle = 'white'

ctx.beginPath()

ctx.arc(MiddleLeftXHalf, TopLineY + MiddleLeftLineHeight + 15, 15, -Math.PI, Math.PI, false)

ctx.stroke()

ctx.textAlign = 'center'

ctx.fillText('V', MiddleLeftXHalf, TopLineY + MiddleLeftLineHeight + 15 + 6)

ctx.strokeStyle = 'white'

ctx.beginPath()

ctx.arc(MiddleLeftXHalf, TopLineY + MiddleLeftLineHeight + 15 + 25, 15, -Math.PI, Math.PI, false)

ctx.stroke()

ctx.textAlign = 'center'

ctx.fillText('V', MiddleLeftXHalf, TopLineY + MiddleLeftLineHeight + 15 + 25 + 6)

效果：