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

【已解决】HTML用Canvas画基本的横向和竖向的线条

HTML crifan 30浏览 0评论
折腾:
【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图
期间,去html中,用Canvas去画基本的线条。
【已解决】HTML用Canvas画基本的横向和竖向的线条
先去试试
src/client/xxxClient/src/views/dashboard/index.vue
<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <canvas id="controlPanel" width="800" height="600">
      你的浏览器不支持canvas,请升级你的浏览器
    </canvas>
  </div>
</template>


<script>
import { mapGetters } from 'vuex'


export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },


  mounted: function() {
    const canvas = document.getElementById('controlPanel')
    if (canvas.getContext) {
      // 获得 2d 上下文对象
      const ctx = canvas.getContext('2d')


      ctx.fillStyle = 'rgb(200,0,0)'
      // 绘制矩形
      ctx.fillRect(10, 10, 55, 50)


      ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
      ctx.fillRect(30, 30, 55, 50)
    }
  }
}
</script>


<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}


canvas {
  border: 1px solid black;
}


</style>
可以画出来2个矩形了:
先想办法画顶部的 从左到右的 4个横线,以及对应文字
js canvas draw thick line
HTML canvas lineWidth Property
CanvasRenderingContext2D.lineWidth – Web APIs | MDN
HTML | canvas lineWidth Property – GeeksforGeeks
HTML | canvas fillStyle Property – GeeksforGeeks
HTML | canvas strokeStyle Property – GeeksforGeeks
学习HTML5 Canvas这一篇文章就够了 – 前端技术汇 – SegmentFault 思否
【总结】
      // ctx.fillStyle = 'green'
      ctx.fillStyle = 'red'
      // ctx.strokeStyle = 'green'
      ctx.strokeStyle = 'red'
      ctx.lineWidth = 10

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

      ctx.moveTo(50, 50) // 把画笔移动到指定的坐标
      ctx.lineTo(100, 50) // 绘制一条从当前位置到指定坐标(200, 50)的直线
      ctx.closePath() // 闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做

      ctx.moveTo(200, 50) // 把画笔移动到指定的坐标
      ctx.lineTo(300, 50) // 绘制一条从当前位置到指定坐标(200, 50)的直线
      ctx.closePath() // 闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做

      ctx.moveTo(400, 50) // 把画笔移动到指定的坐标
      ctx.lineTo(480, 50) // 绘制一条从当前位置到指定坐标(200, 50)的直线
      ctx.closePath() // 闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做

      ctx.moveTo(600, 50) // 把画笔移动到指定的坐标
      ctx.lineTo(750, 50) // 绘制一条从当前位置到指定坐标(200, 50)的直线
      ctx.closePath() // 闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做

      ctx.stroke() // 绘制路径
可以画出来:
 

转载请注明:在路上 » 【已解决】HTML用Canvas画基本的横向和竖向的线条

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
20 queries in 0.080 seconds, using 9.27MB memory