折腾：
【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图
期间，去html中，用Canvas去画基本的线条。
【已解决】HTML用Canvas画基本的横向和竖向的线条
先去试试
src/client/xxxClient/src/views/dashboard/index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <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
【总结】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // 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画基本的横向和竖向的线条