HTML5 Canvas + 下标和上标

2023-11-23

我想在画布中填充文本作为下标和上标选项。我该如何实现这一目标。

请帮忙。


由于您不允许在以下位置使用 HTMLdrawText你不能使用<sup> and sub。相反必须自己做。

换句话说,当您想要上标时,您需要将字体更改为较小,并且在更高的 y 位置绘制文本,或者设置textBaseline = "top"。对于下标,你必须做类似的事情。

否则你可以使用unicode。例如,这样写是有效的:

ctx.fillText('x₂', 50, 50);, ctx.fillText('normalText0123₀₁₂₃₄₅₆₇₈₉', 50, 50);, etc.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5 Canvas + 下标和上标 的相关文章

  • 如何将webview内容划分为多个页面

    我必须使用 Android 上的 PdfDocument 从 webView 创建 PDF https developer android com reference android graphics pdf PdfDocument htm
  • 如何使用 AffineTransform.quadrantRotate 旋转位图?

    我想旋转一个bitmap关于它的中心点 然后将其绘制成更大的图形上下文 位图是40x40 pixels 图形上下文是500x500 pixels 这就是我正在做的 BufferedImage bi new BufferedImage 500
  • Fabric js文本框换行一个长单词

    我正在使用一个自定义的文本框 它应该保持文本框的相同宽度 同时将一个长单词分割成一个新行 我已经修改了该库的维护者之一最初提出的解决方案 您可以在以下链接中找到该代码 这 wrapLine函数被覆盖 https jsfiddle net n
  • 在画布上剪出圆形图像

    我正在使用 html5 canvas 并且我正在创建一个游戏 可以将您的脸部上传到游戏中 并将其用作主要角色 不幸的是 游戏中的角色是圆形的 就像笑脸一样 那么这将如何完成呢 是否可以拍一张照片 然后将其剪成一个圆 这样圆之外的任何东西都是
  • 使用鼠标在 HTML5 Canvas 上绘图

    我想使用鼠标在 HTML Canvas 上绘图 例如 绘制签名 绘制名称 我将如何实施这个 这是一个工作示例
  • 尝试获取屏幕上绘制的每个随机圆圈的 x、y 坐标

    您好 我正在制作一款游戏 该游戏将在屏幕上创建随机圆圈 随机创建的圆圈的值为红色或绿色 我的问题是 我希望不仅能够确定用户何时单击其中一个圆圈 而且还能够确定他们最终单击的圆圈 红色或绿色 下面是我的代码 我的主要问题是试图找到将要绘制的圆
  • 不同时间视频截图

    我在一条线上有 3 个画布 我想在每个画布中放置一个图像 视频的屏幕截图 在不同的时间 问题是所有 3 个屏幕截图都是在同一时间 最后指定的时间 下面是我的 JavaScript 代码 function getVideoScreenShot
  • 将图像缩略图上传到服务器,而不上传整个图像

    据我所知 我在这里问的是不可能的 但我想无论如何我都会问 以防我遗漏了什么 假设您想让用户上传 JPG 图像 并且这些图像被缩放为较小的图标 并且原始图像始终被丢弃并且不再需要 有没有什么方法可以在大多数现代浏览器中普遍使用 让用户选择硬盘
  • 限制线的长度

    我正在尝试画一条代表 弹弓 的线 并且希望它具有最大拉伸长度 在 p5 中 我在位置和位置之间画了一条线 line posA x posA y posB x posB y posA 是鼠标 x 和 y posB 是画布上圆的位置 我想要做的
  • 在 HTML5 画布上创建颜色选择器

    如何在 HTML5 画布上绘制颜色选择器 一个基本的例子是使用getImageData http jsfiddle net eGjak 60 http jsfiddle net eGjak 60 var ctx cv get 0 getCo
  • 在 Fabric.js 中进行裁剪的“toDataURL”函数中,Multiplier 属性无法正常工作

    我的原始尺寸canvas is 800X700 我在用clipTo要在画布的选定部分中工作 var rect new fabric Rect left 100 top 50 fill fff width 376 height 602 str
  • 使用canvas.toDataURL时如何设置crossOrigin属性?

    因此 我尝试为我正在构建的 OpenLayers 3 应用程序创建打印地图函数 我知道他们example http openlayers org en v3 8 2 examples export map html但每当我尝试使用它时 我都
  • 如何等待第一次画布重绘,直到 @font-face-font 加载?

    我有一个 HTML5 画布并用它编写文本context fillText 使用 font face font 使用 Firefox 3 6 显示页面我遇到问题 在画布的第一次绘制上 字体尚未下载 因此文本将以标准字体显示 我找到了一个 解决
  • 三种js更新纹理生成Canvas的最佳性能方式

    I have THREE Points with THREE PointsMaterial As a map我使用生成的动态cavas image 我需要重新渲染canvas在每一帧上 我的部分代码 function makeEnemyBa
  • 如何计算android中位图擦除区域的百分比?

    我是安卓新手 我正在制作一个可以使用手指擦除画布上的位图的应用程序 像手指画橡皮擦之类的东西 我想计算擦除区域的百分比 例如 60 已从完整图像中擦除 请帮助我做到这一点 提前致谢 我尝试了一些方法 它总是给我 0 它不起作用 请参阅该方法
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 如何以 Rails 形式将图像从 上传到具有 Rails Active Storage 的 S3?

    正如标题中所述 我正在尝试使用 Rails 的 Active Storage 从嵌套在 Rails 表单中的元素将图像上传到我的 S3 存储桶 到目前为止我已经能够使用使用 Active Storage 上传图像 这User class h
  • Node.js 白板应用程序的客户端或服务器端 HTML5 画布渲染?

    我认为一个小白板 Web 应用程序将是提高我的 Node js 和 JavaScript 技能的好方法 我在网上看到了一些 这是有道理的 因为它似乎非常适合这种堆栈 然而 花点时间思考一下 我想知道客户端和服务器在这种 Web 应用程序中的
  • canvas.getContext('2D') 返回空值

    我创建了一个画布并将其命名为getContext 方法 但它返回null为上下文 这是我使用的代码 我在控制台中得到了这个
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么

随机推荐

  • 在 pandas DataFrame/Series 中快速选择时间间隔

    我的问题是我想过滤 DataFrame 以仅包含间隔内的时间 开始 结束 如果不关心这一天 我只想过滤每天的开始和结束时间 我有一个解决方案 但速度很慢 所以我的问题是是否有一种更快的方法来进行基于时间的过滤 Example import
  • TestNG 使用多个 DataProvider 和单个测试方法

    我一直在寻找一种在我的测试方法中使用多个 DataProvider 的方法 我的场景如下 假设我们有一个 DataProvider 类 Test public class ExampleDataProvider Returns the li
  • 通过解释器突变混淆 python 字节码

    事实上 Dropbox 做得非常好 他们能够保护用 python 制作的桌面应用程序 我对此进行了很多研究 但没有比混淆更好的解决方案 这不是很安全的方法 您最终会看到您的代码上传到某个地方 我听了一个会议乔瓦尼 巴霍 PyInstalle
  • 如何实现方法调配?

    我正在尝试使用 SIMBL 修改程序的行为 我没有它的源代码 我使用类转储并发现我需要覆盖实例方法 该方法位于称为控制器的类中 我需要做的就是获取参数 arg1 就这样了 也许 NSLog 或发布通知 我读到了 Objective C 中的
  • 如何设置我的 gradle 最终版本 apk

    早些时候我的 gradle 是这样的 这当然是不正确的 apply plugin android android compileSdkVersion 19 buildToolsVersion 19 0 3 defaultConfig min
  • 如何将函数应用于 MATLAB 中矩阵的每一行/列?

    您可以将函数应用于向量中的每个项目 例如 v 1 或者您可以使用该功能arrayfun 如何在不使用 for 循环的情况下对矩阵的每一行 列执行此操作 许多内置操作 例如sum and prod已经能够跨行或列进行操作 因此您可以重构您正在
  • 如何在Python中处理JSON和Windows路径?

    我正在尝试运行一个 Python 包 它读取 JSON 文件 配置文件 以获取信息 问题是我需要将一些 JSON 文件编辑到包含的目录中 该脚本的创建者使用的是 Linux 内核 因此他使用的是 Linux 路径名 而我使用的是 Windo
  • DISTINCT 仅适用于一列

    假设我有以下查询 SELECT ID Email ProductName ProductModel FROM Products 如何修改它以便它不返回重复的电子邮件 换句话说 当多行包含相同的电子邮件时 我希望结果仅包含其中一行 最好是最后
  • 计算“组特征”,无需 ddply 和 merge

    我想知道是否有比我通常采用的方法更直接的方法来计算某种类型的变量 下面的例子可能最好地解释了这一点 我有一个包含 2 列的数据框 水果以及水果是否腐烂 我想为每一行添加例如同一类别的水果腐烂的百分比 例如 有 4 个苹果条目 其中 2 个已
  • 如何让 ArrayList 和 Scanner 配合得很好?

    import java util public class CyclicShiftApp public static void main String args Scanner scan new Scanner System in Arra
  • 将类名存储在类变量中而不输入类名?

    在Python类的实例方法中 我知道我们可以通过以下方式获取类名self class name 但是 我想将类的名称存储在类变量中 而不对类的名称进行编码 我知道我可以这样做来将类的名称放入类变量中 class MyClass object
  • 从ajax和ActionResult下载文件

    我想使用 ajax 和 ActionResult 在浏览器上下载文件 文件被下载并从我的 ActionResult 返回 我看到 Http 查询正常 并看到响应正文中的数据 问题是该文件不建议保存在浏览器中 一切看起来都不错 我在教程和论坛
  • 如何使用 Docker 在 HTTPS(SSL 连接)上部署 Next.js 应用程序?

    我按照 Next js 文档中的说明使用 Docker 启动服务器 https nextjs org docs deployment docker image 使用 http 加载站点可以工作 但 https 返回 SSL 协议错误 我详细
  • Delphi SAPI 文本转语音

    首先 这不是重复的德尔福和SAPI 我对 SAPI in Delphi 主题有一个具体问题 我使用了 Delphi 2009 中出色的导入类型库指南来在组件选项板中获取 TspVoice 组件 这很好用 和 var SpVoice TSpV
  • 如何将方法标记为强制方法?

    假设您使用构建器模式创建一个名为 Person 的类 并假设该 Builder 类包含方法body head arms 而且当然build 然后你考虑方法head and build 该类的用户必须这样做 我们希望以某种方式将这些方法标记为
  • Internet Explorer 在查询字符串中存在特殊字符问题

    这不是一个new问题 这里有很多关于 IE 在处理查询字符串中的特殊字符时遇到问题的问题 在所有情况下都是相同的 Chrome Firefox Safari 每个 都可以正确处理 UTF 8 编码的 URL 几乎所有这些甚至都可以处理 IR
  • (x:_) 和 [x:_] 是什么意思?

    head a gt a head error No head for empty lists head x x head a gt a head xs case xs of gt error No head for empty lists
  • 获取监视器的名称

    我在使用 winapi 检索监视器的名称时遇到了一些麻烦 根据 stackoverflow 上的其他条目 获取监视器名称的正确方法是 EnumDisplayDevices nullptr 0 oDisplayDevice 0 char lp
  • Haskell 类型让简单的“平均”函数令人沮丧

    我正在尝试初学者 Haskell 我想编写一个平均函数 这似乎是世界上最简单的事情 对吧 Wrong 看起来 Haskell 的类型系统禁止平均值处理通用数字类型 我可以让它处理积分列表或分数列表 但不能同时处理两者 I want aver
  • HTML5 Canvas + 下标和上标

    我想在画布中填充文本作为下标和上标选项 我该如何实现这一目标 请帮忙 由于您不允许在以下位置使用 HTMLdrawText你不能使用