折腾：
【未解决】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
【总结】
// 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画基本的横向和竖向的线条