用html将竖的图片打横,【已解决】HTML用Canvas画基本的横向和竖向的线条

折腾：

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

期间，去html中，用Canvas去画基本的线条。

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

先去试试

src/client/xxxClient/src/views/dashboard/index.vue

你的浏览器不支持canvas,请升级你的浏览器

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)

}

}

}

.dashboard {

&-container {

margin: 30px;

}

&-text {

font-size: 30px;

line-height: 46px;

}

}

canvas {

border: 1px solid black;

}

可以画出来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() // 绘制路径

可以画出来：