最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】HTML中用Canvas画圆圈

HTML crifan 53浏览 0评论
折腾:
【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图
期间,再去canvas中圆圈
如图:
希望画出大大小小的各种圆圈
包括圆圈里面还带东西的。
学习HTML5 Canvas这一篇文章就够了 – 前端技术汇 – SegmentFault 思否
      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)
效果:

转载请注明:在路上 » 【已解决】HTML中用Canvas画圆圈

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
18 queries in 0.078 seconds, using 9.24MB memory