答案和评论是完美的,我想补充一点,你可以通过将字符代码移动8272轻松地将数字转换为下标,这对应于“0”(代码8320)的字符代码与为“0”(代码48)。

例如:

var text = "N1234567890";

function subNums(str)

{

var newStr = "";

for (var i=0; i

{

// Get the code of the current character

var code = str.charCodeAt(i);

if (code >= 48 && code <= 57)

{

// If it's between "0" and "9", offset the code ...

newStr += String.fromCharCode(code + 8272);

}

else

{

// ... otherwise keep the character

newStr += str[i];

}

}

return newStr

}

// Get the context

var ctx = document.getElementById('myCanvas').getContext('2d');

// Write the string

ctx.font = "20px serif";

ctx.fillText(text, 0, 20);

ctx.fillText(subNums(text), 0, 40);

这显然只是一个将所有数字转换为下标的快速示例,而不一定是您一直想要的数字!

更有用的可能是直接将数值转换为下标,您可以遍历所有数字并创建一个字符串,其字符在“0”(代码8320)和“₉”(代码8329)之间:

// Numerical value to use as subscript

// Don't start it with 0 otherwise it will be read as an octal value!

var index = 1234567890;

function toSub(value)

{

var str = "";

// Get the number of digits, with a minimum at 0 in case the value itself is 0

var mag = Math.max(0, Math.floor(Math.log10(value)));

// Loop through all digits

while (mag >= 0)

{

// Current digit's value

var digit = Math.floor(value/Math.pow(10, mag))%10;

// Append as subscript character

str += String.fromCharCode(8320 + digit);

mag--;

}

return str;

}

// Get the context

var ctx = document.getElementById('myCanvas').getContext('2d');

// Write the string

ctx.font = "20px serif";

ctx.fillText("N" + index, 0, 20);

ctx.fillText("N" + toSub(index), 0, 40);

html5 上标,HTML5 Canvas +下标和上标相关推荐

  1. 刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果

    先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...

  2. 【Latext】上标下标 ( 右侧上标下标 | 任意字符的正上标记 | 任意字符的正下标记 | 常用数学符号的上标和下标 | 加和 | 乘积 | 交集 | 并集 | 上积 | 极限 | 上弧 )

    文章目录 一.右侧上标下标 二.任意字符的正上标记 三.任意字符的正下标记 四.常用数学符号的上标和下标 ( 加和 | 乘积 | 交集 | 并集 | 上积 | 极限 ) 五.上弧 一.右侧上标下标 普 ...

  3. HTML5 中的canvas元素用于,HTML5中的Canvas元素

    canvas 元素用于在网页上绘制图形. 什么是Canvas? HTML 5 的canvas元素使用JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas ...

  4. html5画布页面,HTML5 界面元素 Canvas 参考手册

    HTML5 界面元素 Canvas 参考手册 转载请保留此句:太阳火神的美丽人生 -  本博客专注于敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否 ...

  5. canvas插件_HTML系列之-HTML5新元素之Canvas详解

    课程简介: 课程目标:通过本课程学习,掌握HTML5中图形绘制canvas的基本原理和使用,并利用canvas解决实际相关问题. 适用人群:具有一定html.css.javascript开发基础的人员 ...

  6. html5怎么修改图片大小,HTML5 javascript修改canvas的大小

    方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.wid ...

  7. 用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸

    怎么使用HTML5中的Canvas绘制笑脸 发布时间:2021-02-26 09:33:14 来源:亿速云 阅读:75 作者:清风 这篇"怎么使用HTML5中的Canvas绘制笑脸" ...

  8. php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码

    这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下 今天,你将学习一项称为Canvas(画布)的web技术,以及 ...

  9. 写CSDN文章时,生成下标、上标、竖线的方法

    文章目录 1.下标 2.上标 3.竖线"|" 1.下标   在数字两边加上 ~ 即可.   如图所示: 2.上标   如图所示: 3.竖线"|" 在CSDN表格 ...

最新文章

  1. 【转】CPU位数、核数、个数
  2. 数据中台应该包含什么?
  3. php正则表达式匹配img中任意属性的方法
  4. office 自动编号系列碰到问题小解
  5. 微型计算机用什么评价判断,环评中常用评价等级的判定
  6. 继续教育自动听课软件_荣耀小口哨app下载-华为荣耀小口哨软件v1.9.9 安卓最新版 - 极光下载站...
  7. php生成标准excel表格,php导出生成excel表格几种方法介绍
  8. 中软国际2020年业绩再创新高 归母净利同比增长26.5%
  9. scatterpie | ggplot2的几何图形拓展包(1):如何在地图中添加饼图
  10. 前端开发大师修炼指南
  11. 力扣题目——98. 验证二叉搜索树
  12. 多线程访问共同的代码或者对象:lock避免出错
  13. 全网最强红黑树的理解和实现
  14. 【应用程序无法正常启动0xc000007b 请点击确定关闭应用程序】的错误如何解决?
  15. 广东高中生多少人_广东2016高考五大变化 考生总人数73.3万
  16. 用AI一夜看尽长安花?华为云喊你来打卡
  17. python pydicom读取dicom文件信息的几种方式
  18. [XMOVE自主设计的体感方案] 历代版本系统介绍(一)X-MOVE1.0
  19. c语言trim函数去除全部空格,Excel Trim函数使用方法,含用三个去空格函数都删不了的空格实例...
  20. 数学之美系列二十四 -- 谈谈动态规划与如何设计动态规划算法

热门文章

  1. BDP荧光染料BODIPY FL-PEG2-COOH/carboxylic acid/羧基羧酸,Ex/Em(nm)503/509
  2. 如何使用 Filebeat,ILM 和数据流跨多个索引管理 Elasticsearch 数据
  3. 2016年C语言专业课,2016-2018年中央财经大学C语言程序设计考研真题及答案解析(6)...
  4. mysql tcp性能优化_MySQL性能优化: 使用pt-query-digest分析慢查询日志
  5. Linux网络编程(三)
  6. Windows Kits(Windows 工具包)
  7. Top Android App使用的组件(2)
  8. 怎么卸载Safari浏览器?
  9. 鹏哥手把手带我刷好题 · 编程练习 · I
  10. RollPitchYaw傻傻分不清