Canavs在文字上绘制删除线/中划线


效果图:

思路:

  1. 绘制文字
  2. 绘制高度为1px的长方形,并用黑色填充
  3. 长方形的宽度为文字的长度

 

具体代码:

      let canvas = document.getElementById('canvas');
      let ctx = canvas.getContext('2d');
      
      const text = 'hello world';
      ctx.font = '26px/26px Arial';
      ctx.fillStyle = '#f00';
      ctx.fillText(text, 100, 100);

      ctx.beginPath();
      const textWidth = ctx.measureText(text).width;
      ctx.rect(100, 92, textWidth, 2);
      ctx.fillStyle = '#000';
      ctx.fill();    

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM