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)模式还是笔刷( ...
随机推荐
- 01 go-zero入门--单体服务demo
目录 官方文档: 视频地址: 系统环境: 配置环境: 1. golang安装 2. go module配置 3. goctl安装 4.protoc,protoc-gen-go,protoc-gen-g ...
- fastposter v2.8.4 发布 电商海报生成器
fastposter v2.8.4 发布 电商海报生成器 fastposter海报生成器,电商海报编辑器,电商海报设计器,fast快速生成海报 海报制作 海报开发.贰维海报,图片海报,分享海报贰维码推 ...
- C++ 初始化列表(Initialization List)
请注意以下继承体系中各class的constructors写法: 1 class CPoint 2 { 3 public: 4 CPoint(float x=0.0) 5 :_x(x){} 6 7 f ...
- 单体项目使用Spring Security实现登陆认证授权
前端可以根据权限信息控制菜单和页面展示,操作按钮的显示.但这并不够,如果有人拿到了接口,绕过了页面直接操作数据,这是很危险的.所以我们需要在后端也加入权限控制,只有拥有操作权限,该接口才能被授权访问. ...
- .net程序员学习java篇一(搭建SSM)
一.安装IDE 相比于.net环境的一气呵成,java可能麻烦一点,这里记录下来,避免萌新踩坑 1.1安装JDK,这里不要玩什么花哨,老老实实选个大众版(Oracle JDK1.8x),设置环境变量, ...
- starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
在线求解[已解决] 问题 D:\persioninto_exe\soft\jdk1.8.0_322\bin\java.exe -XX:TieredStopAtLevel=1 -noverify -Ds ...
- c# - 如何在圆角 WPF 窗体中创建圆角矩形?
我正在 WPF 中创建一个应用程序,我想要圆角.收到.现在窗体是无边框的,我正在尝试创建一个圆角矩形并将其放在顶部,使其看起来像 Windows 应用程序的顶部栏. 我做不到. 这是我的代码: < ...
- 理解太阳辐射 DNI DHI GHI
理解太阳辐射 DNI DHI GHI DNI: Direct Normal Irradiance 阳光从太阳盘面直接照射到与光路正交的表面,称作直接辐射简写为 DNI. DHI: Diffuse ...
- 鸿蒙HarmonyOS实战-ArkTS语言基础类库(概述)
一.概述 1.什么是语言基础类库 语言基础类库,也称为标准库或核心库,是编程语言提供的一组内置的基础功能和常用工具的集合.它通常包含了各种数据结构.算法.输入输出处理.字符串处理.日期时间处理.文件操 ...
- Your Post Title Here
VSCode 实时预览还需要执行 Markdown: Open Preview to the Side 命令来实现. 在命令窗口输入 Markdown: Open Preview to the Sid ...