Canavs在文字上绘制删除线/中划线
效果图:

思路:
- 绘制文字
- 绘制高度为1px的长方形,并用黑色填充
- 长方形的宽度为文字的长度
具体代码:
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();
Canavs在文字上绘制删除线/中划线的更多相关文章
- The usage of Markdown---文字强调:加粗/斜体/文本高亮/删除线/下划线/按键效果
更新时间:2019.09.14 1. 序言 有时候,我们需要对某些文字进行强调,例如粗体和斜体.而Markdown通常可以使用星号*或者下划线_进行文字强调. 2. 加粗 如果想要达到加粗的效果,可以 ...
- 在TextView上加上下划线或中划线
在做商城项目是需要用到原价格以及降价后的价格,不可避免用到下划线或中划线 textView.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG ); //下 ...
- 文字排版--删除线(text-decoration:line-through)
如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到: 上图中的原价上的删除线使用下面代码就可以实现: .oldPrice{text-decoration:line-through;}
- WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法。
原文:WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330 ...
- 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- 给 UILabel 中的文字增加 line-through / Strikethrough (删除线)样式
iOS 6 中苹果引入了 NSStrikethroughStyleAttributeName 属性,用于设置 NSAttributedString 的删除线样式,用法如下: let attribute ...
- jQuery 表格中实现“删除线”的增进方法
之前做了一个删除线的效果,就是类似这样的,在内容的中间加一条线. 但是又有点不同的是,这种删除线不是单纯的在文字之上,而是给一个Table中的一行加上这种删除线效果. 这里有两个方法,是在不同时期写的 ...
- 自定义界面上绘制Text,可通过拖动控制文字大小及其位置
项目地址 最近项目上有个需求,需要在一块区域中显示文字,这块区域可以拖动,也可以通过拖拽右下角来改变大小,里面的文字大小要根据区域的大小进行自适应.刚开始觉得这个需求不难,只需要一个TextView就 ...
- android中实现在ImageView上随意画线涂鸦
我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完 ...
- iOS_绘制带删除线的Label
效果图例如以下: 一个带删除线的文本标签,继承自UILabel 自绘代码过程例如以下: 1,重写控件的drawRect方法 2,首先得到上下文对象 3,设置颜色,并指定是填充(Fill)模式还是笔刷( ...
随机推荐
- 视频讲解如何构建surging微服务调用
surging 是一款优秀的微服务引擎,包括了社区版,标准版,异构版,平台版本来解决公司的业务场景需求,如果你是初学者,或者是技术狂热者,社区版完全可以符合你们的要求来学习或者构建起微服务体系的引擎框 ...
- 面试官:这就是你理解的Java多线程基础?
引言 现代的操作系统(Windows,Linux,Mac OS)等都可以同时打开多个软件(任务),这些软件在我们的感知上是同时运行的,例如我们可以一边浏览网页,一边听音乐.而CPU执行代码同一时间只能 ...
- SpringBoot 二维码生成
一.基于Google开发工具包ZXing生成二维码 1.引入需要的依赖 <!-- zxing生成二维码 --> <dependency> <groupId>com. ...
- 环境变量管理工具Modules的安装
一.软件依赖tcl软件 (1)tcl下载地址:http://www.tcl-lang.org/software/tcltk/(2)编译安装 cd unix/ ./configure --prefix= ...
- wpf 空间坐标系下,画一个立方体轮廓
代码: public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); Worignpt ...
- .NET Core 项目Linux环境下生成二维码
问题: 公司系统开发中,需要对企微授权链接进行二维码生成,然后向客户提供:当然,首当其冲想到的是使用ZXing.NET库进行实现,毕竟生成简单二维码也就那几句代码:然而,在本地环境中,一切都很正常,但 ...
- 使用 TestContainers 进行数据库集成测试
在软件开发过程中,集成测试是至关重要的一环.它确保不同组件之间的协作正常,并验证系统在整体上的功能和性能.然而,传统的集成测试往往需要依赖于外部资源,如数据库.消息队列等,这给测试环境的搭建和维护带来 ...
- NOIP模拟90(多校23)
T1 回文 解题思路 原来 \(n^3\) 可以过 500 ... 先枚举一下路径长度,对于同一路径长度点数最多是 \(n\) 个,我们可以接着枚举从 \((n,m)\) 出发的路径长度相同的点. 然 ...
- yum install 出错
``` yum -y install ansible ``` 出错 一直在刷屏,刚开始以为在安装但是最后没有安装成功 百度发现是这是redhat7和8的yum源混用 1.先确认本机器系统信息 cat ...
- Qt内存回收机制
参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=16 Qt中内存的回收是自己完成的,实验中,我们自定义一个按钮,通过重写析构函数来观察现象. 新建 ...