不用担心iOS Safari不支持canvas,查看https://caniuse.com/ 发现是支持的

ctx.font = "0.16rem Arial";

为了适配移动端直接用了rem,但是iOS Safari只支持标准的canvas,标准的canvas只支持px不支持rem,所以文字不显示。

解决方案是换成px

var clientWidth = document.documentElement.clientWidth;
var fontWidth = clientWidth*2*12.5/750;
//设置自适应字体大小
ctx.font = fontWidth + "px Arial";

canvas画的文字在安卓移动设备上可以显示,但是在ios移动设备上无法显示的更多相关文章

  1. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  2. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  3. Canvas 3D球形文字云动画特效

    Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...

  4. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  6. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  7. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  9. HTML5 Canvas实现黑客帝国文字掉落效果

    效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...

随机推荐

  1. 电池容量单位 Wh和 Ah的关系

    电池容量单位,应该是一个能量单位.我认为使用Wh,KWh比较科学. 功率单位是W 能量单位是WH 部分手机.充电宝使用Ah作为单位,需要通过电池输出电压进行单位转换. 转换公式 Ah * 电池输出电压 ...

  2. 利用kali嗅探周围发送的短信

    设备清单: 摩托罗拉 C118 (25块) FT232RL USB TO TTL (30元) 摩托罗拉 Motorola C118专用数据连接线 (10块) MiniUSB 链接线(10元,这个大家手 ...

  3. Codeforces Round #437 (Div. 2)[A、B、C、E]

    Codeforces Round #437 (Div. 2) codeforces 867 A. Between the Offices(水) 题意:已知白天所在地(晚上可能坐飞机飞往异地),问是否从 ...

  4. datetime.datetime.now()时间格式转化是碰到的问题

    import datetime print datetime.datetime.now() # 2016-03-28 17:16:00.812000 a = ‘2016-03-28 17:16:00. ...

  5. Powershell split file

    #网上所得非原创 function split($inFile, $outPrefix, [Int32] $bufSize){ $stream = [System.IO.File]::OpenRead ...

  6. BZOJ2301:[HAOI2011]Problem b(莫比乌斯反演,容斥)

    Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. Input 第一行一个整数 ...

  7. PHP------XML

    XML XML的含义:可扩展标记语言,设计出来的目的是:传输数据 HTML的含义:超文本标记语言,设计出来的目的是:显示数据 它们两个设计出来的目的是不一样的. 它们两个都是标记语言,相似性比较高. ...

  8. 3springboot:springboot配置文件(配置文件占位符、Profile、配置文件的加载位置)

    1.配置文件占位符 RaandomValuePropertySourcr:配置文件可以使用随机数     ${random.value}    ${random.int}  ${random.long ...

  9. Jupyter Notebook 设置黑色背景主题、字体大小、代码自动补全

    1.背景主题.字体大小设置 安装Jupyter主题: pip install jupyterthemes 然后,更新Jupyter主题: pip install --upgrade jupyterth ...

  10. Windows平台JxCore打包

    1.下载JxCore https://raw.githubusercontent.com/jxcore/jxcore-release/master/0311/jx_win64v8.zip 2.解压并配 ...