最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】HTML中用Canvas画文字

HTML crifan 196浏览 0评论
折腾:
【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图
期间,再去添加文字
参考:
学习HTML5 Canvas这一篇文章就够了 – 前端技术汇 – SegmentFault 思否
用:
      ctx.strokeText('进线', 10, 200)
结果:
挤在一起了。且背景色(和边框)是红色。
所以要去:画白色文字
不过,感觉是:需要先去画背景色是透明的文字
canvas fillstyle 透明
HTML5 canvas globalAlpha 属性
// 调节透明度
ctx.globalAlpha=0.2;
canvas如何做到背景透明,但canvas中的元素不透明? – 知乎
HTML5 – Canvas的使用样例6(设置透明度)
使用样式和颜色 – Web API 接口参考 | MDN
      ctx.fillStyle = 'white'
      ctx.strokeStyle = 'green'
      // ctx.lineWidth = 10
      ctx.lineWidth = 1
      ctx.font = '20px 宋体'
      ctx.strokeText('进线', 10, 200)
效果:
HTML 5 Canvas 参考手册
HTML5 canvas fillText() 方法
再去调整文字:
      // 获得 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
HTML Canvas Text
就是:
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)
应该是可以显示白色的了。
只不过背景是白色,所以看不见:
javascript – Changing color for fillText() on HTML5 <canvas> – Stack Overflow
javascript – Change text color from canvas with Select option – Stack Overflow
HTML5 Canvas Text Color Tutorial
所以再去:
【已解决】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画文字

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
88 queries in 0.149 seconds, using 20.65MB memory