折腾：
【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图
期间，再去添加文字
参考：
用：
ctx.strokeText('进线', 10, 200)结果：
挤在一起了。且背景色（和边框）是红色。
所以要去：画白色文字
不过，感觉是：需要先去画背景色是透明的文字
canvas fillstyle 透明
// 调节透明度 ctx.globalAlpha=0.2;
ctx.fillStyle = 'white'
ctx.strokeStyle = 'green'
// ctx.lineWidth = 10
ctx.lineWidth = 1
ctx.font = '20px 宋体'
ctx.strokeText('进线', 10, 200)效果：
再去调整文字：
// 获得 2d 上下文对象
const ctx = canvas.getContext('2d')
// ctx.fillStyle = 'green'
ctx.fillStyle = 'red'
// ctx.strokeStyle = 'green'
ctx.strokeStyle = 'red'
ctx.lineWidth = 6
ctx.beginPath() // 新建一条path
...
ctx.stroke() // 绘制路径
ctx.fillStyle = 'white'
ctx.strokeStyle = 'green'
// ctx.lineWidth = 10
ctx.lineWidth = 1
ctx.font = '12px 宋体'
ctx.strokeText('进线', 270, 30)效果：
但是还是没有实现：白色文字
canvas text color
就是：
ctx.fillStyle = “red”;
设置的颜色
不过用的是fillText：
ctx.fillText("Hello World", canvas.width/2, canvas.height/2); 所以改为：
ctx.fillStyle = 'white'
// ctx.strokeStyle = 'green'
// ctx.lineWidth = 10
ctx.lineWidth = 1
ctx.font = '12px 宋体'
// ctx.strokeText('进线', 270, 30)
ctx.fillText('进线', 270, 30)应该是可以显示白色的了。
只不过背景是白色，所以看不见：
所以再去：
【已解决】Html的Canvas设置全局背景色
然后即可：
【总结】
ctx.fillStyle = 'white'
// ctx.strokeStyle = 'green'
// ctx.lineWidth = 10
ctx.lineWidth = 1
ctx.font = '12px 宋体'
// ctx.strokeText('进线', 270, 30)
ctx.fillText('进线', 270, 30)目前效果：
转载请注明：在路上 » 【已解决】HTML中用Canvas画文字