效果图:

思路:

  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();

Canavs在文字上绘制删除线/中划线的更多相关文章

  1. The usage of Markdown---文字强调:加粗/斜体/文本高亮/删除线/下划线/按键效果

    更新时间:2019.09.14 1. 序言 有时候,我们需要对某些文字进行强调,例如粗体和斜体.而Markdown通常可以使用星号*或者下划线_进行文字强调. 2. 加粗 如果想要达到加粗的效果,可以 ...

  2. 在TextView上加上下划线或中划线

    在做商城项目是需要用到原价格以及降价后的价格,不可避免用到下划线或中划线  textView.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG ); //下 ...

  3. 文字排版--删除线(text-decoration:line-through)

    如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到: 上图中的原价上的删除线使用下面代码就可以实现: .oldPrice{text-decoration:line-through;}

  4. WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法。

    原文:WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330 ...

  5. 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  6. 给 UILabel 中的文字增加 line-through / Strikethrough (删除线)样式

    iOS 6 中苹果引入了 NSStrikethroughStyleAttributeName 属性,用于设置 NSAttributedString 的删除线样式,用法如下: let attribute ...

  7. jQuery 表格中实现“删除线”的增进方法

    之前做了一个删除线的效果,就是类似这样的,在内容的中间加一条线. 但是又有点不同的是,这种删除线不是单纯的在文字之上,而是给一个Table中的一行加上这种删除线效果. 这里有两个方法,是在不同时期写的 ...

  8. 自定义界面上绘制Text,可通过拖动控制文字大小及其位置

    项目地址 最近项目上有个需求,需要在一块区域中显示文字,这块区域可以拖动,也可以通过拖拽右下角来改变大小,里面的文字大小要根据区域的大小进行自适应.刚开始觉得这个需求不难,只需要一个TextView就 ...

  9. android中实现在ImageView上随意画线涂鸦

    我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完 ...

  10. iOS_绘制带删除线的Label

    效果图例如以下: 一个带删除线的文本标签,继承自UILabel 自绘代码过程例如以下: 1,重写控件的drawRect方法 2,首先得到上下文对象 3,设置颜色,并指定是填充(Fill)模式还是笔刷( ...

随机推荐

  1. 如何在低代码平台中引用 JavaScript ?

    引言 在当今快速发展的数字化时代,企业对业务应用的需求日益复杂且多元.低代码开发平台作为一个创新的解决方案,以直观易用的设计理念,打破了传统的编程壁垒,让非技术人员也能轻松构建功能完备的Web应用程序 ...

  2. redis-desktop-manager-0.8.0.3844

    redis-desktop-manager-0.8.0.3844 下载地址: https://www.aliyundrive.com/s/Y2fobkVjAdF 链接:https://pan.baid ...

  3. HTTP 连接详解

    概述 世界上几乎所有的 HTTP 通信都是由 TCP/IP 承载的,客户端可以打开一条TCP/IP连接,连接到任何地方的服务器.一旦连接建立,客户端和服务器之间交换的报文就永远不会丢失.受损或失序 T ...

  4. .NET实现获取NTP服务器时间并同步(附带Windows系统启用NTP服务功能)

    对某个远程服务器启用和设置NTP服务(Windows系统) 打开注册表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Tim ...

  5. 日常Bug排查-偶发性读数据不一致

    日常Bug排查-偶发性读数据不一致 前言 日常Bug排查系列都是一些简单Bug的排查.笔者将在这里介绍一些排查Bug的简单技巧,同时顺便积累素材. Bug现场 业务场景 先描述这个问题出现的业务场景. ...

  6. JS 实现鼠标框选(页面选择)时返回对应的代码或文本内容

    JS 实现鼠标框选(页面选择)时返回对应的代码或文案内容 一.需求背景 1.项目需求 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报. 2.需求解析 虽然这需求就一句话的事,但是很显然, ...

  7. 01.Alpine编译glibc

    概要 本文档采用glibc2.28版本作为示例,模拟内网环境无法访问github等开源社区 为精简docker容器镜像,采用Alpine镜像,需要手动编译glibc源代码 制作编译好的glibc二进制 ...

  8. LiteOS基础学习

    1 IDE环境安装 目的:安装LiteOS IDE,并且是使用仿真方式运行. 1.1 IDE安装 HUAWEI LiteOS Studio安装 (gitee.io) 1.2 中文安装 HUAWEI L ...

  9. Spark-submit常用任务命令参数和说明

    Spark常用任务命令参数和说明 spark-submit \ --name task2018072711591669 \ --master yarn --deploy-mode client \ - ...

  10. WIN10 家庭版 罗技G hub 安装提示不兼容当前操作系统解决方法

    WIN10 家庭版 罗技G hub 安装提示不兼容当前操作系统解决方法 解决方法: 下载Onboard Memory Manager就可以. --