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)模式还是笔刷( ...
随机推荐
- 02. x86处理器运行方式
[CPU指令] CPU控制器通过读取存储器中的指令确定要执行的功能,CPU运行需要不停的读取指令,计算机启动后CPU会从固定地址处开始读取指令,首先读取 NOR Flash 存储器中的固件,固件执行完 ...
- Python——基本输入和输出
Python提供了基本的输入和输出功能,这些功能通常是通过内置的input()函数(用于输入)和print()函数(用于输出)来实现的.以下是这两个函数的详细描述和示例: 1. print() 函数( ...
- linux打包压缩工具详解
linux打包压缩工具详解 目录 linux打包压缩工具详解 1.linux文件压缩工具 1.1 compress命令详解 1.2 gzip命令详解 1.3 bzip2命令详解 1.4 xz命令详解 ...
- kettle使用4-使用Pan.bat执行转换、Kitchen.bat执行作业
一.直接在spoon中执行作业 使用bat文件执行速度比执行在spoon.bat中执行慢很多,如果少数几个任务,可以直接在spoon中执行. 1.新建作业 2.在通用中,新建START 任务执行的时间 ...
- 80x86汇编—指令系统
文章目录 MOV 非法传送 XCHG XLAT 堆栈指令 push 和 pop 标志寄存器指令 重点理解CF与OF与SF实际应用中的关系 运算指令 控制转移类指令(重点) 条件转移指令 顺序是按照我们 ...
- OAI SDR LTE 基站部署
目录 文章目录 目录 硬件设备要求 物料购买 部署架构图 安装 LTE/EPC 前期准备 运维相关 操作系统要求 内核要求 CPU Frequency scaling,将 CPU 频率打满 eNode ...
- 统计学习:EM算法及其在高斯混合模型(GMM)中的应用
1. EM算法的基本思想 我们在应用中所面对的数据有时是缺损的/观测不完全的[1][2].我们将数据分为: 可观测数据,用\(Y\)表示: 缺失数据,用\(Z\)表示; 完全数据,用\(X=(Y, Z ...
- java rgb转hsv
public static double[] toHSV(int r, int g, int b) { Color color = new Color(r, g, b); float[] hsv = ...
- sass 导入@import详解
@import Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件.被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 ( ...
- QtCreator 跨平台开发添加动态库教程(以OpenCV库举例)- Windows篇
Qt具有跨平台的特性,即Qt数据结构与算法库本身跨平台和编译脚本(.pro)跨平台.在同时具有Windows下和Linux开发的需求时,最好的建议是使用QtCreator来开发,虽然也可以使用其他 ...