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)模式还是笔刷( ...
随机推荐
- 逆向wechat
本篇博客园地址https://www.cnblogs.com/bbqzsl/p/18171552 计划来个wechat的逆向系列,包括主程序WeChat,以及小程序RadiumWMPF. 开篇,对We ...
- 如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1,因为在此系统上禁止运行脚本
点击查看代码 Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
- 智能工作流:Spring AI高效批量化提示访问方案
基于SpringAI搭建系统,依靠线程池\负载均衡等技术进行请求优化,用于解决科研&开发过程中对GPT接口进行批量化接口请求中出现的问题. github地址:https://github.co ...
- UE4 绘制Gizmo
Unity的Gizmos可以很方便的在编辑器下进行调试,Unreal中也有一些办法可以达到效果. 本文主要参考:https://zhuanlan.zhihu.com/p/363625037,进行了一些 ...
- 一键自动化博客发布工具,用过的人都说好(51cto篇)
51cto是一个优秀的博客平台,今天给大家讲解一下blog-auto-publishing-tools如何自动发布博客到51cto上. 当然在实现过程中有可能会遇到各种困难,不过不用担心,我们一个个来 ...
- java学习之旅(day.20)
注解和反射 注释comment:给人看 注解annotation:不仅可以给人看,还能给程序看,甚至能被其他程序读取 注解入门 什么是注解 注解的作用: 不是程序本身,可以对程序作出解释(这一点和注释 ...
- Vue——Ajax请求的基本使用
1.get方法发送Ajax请求 // 直接在 URL 上添加参数 ID=12345 axios.get('/user?ID=12345') .then(function (response) { co ...
- Java爬虫-爬取疫苗批次信息
今年3月份开始,就接到通知, 根据<关于开展有关人群第二剂次脊髓灰质炎灭活疫苗补种工作的通知>国疾控卫免发[2024]1号文件要求,在2016年3月1日至2019年9月30日之间出生的儿童 ...
- Java异常中throw 与throws的区别
throw 与 throws区别 在Java中,throws和throw是两个不同的关键字,它们在异常处理中起着不同的作用. throws关键字: throws用于声明一个方法可能会抛出的异常.当一个 ...
- idea 使用 mvn clean package 报错 Could not create local repository at
使用 mac 版本的 idea 打包使用打包命令 mvn clean package 总是报错: [ERROR] Could not create local repository at /Repos ...