不用担心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. Clean WRH$_ACTIVE_SESSION_HISTORY in SYSAUX

    Tablespace SYSAUX grows quickly. Run Oracle script awrinfo.sql to find what is using the space. One ...

  2. eigenMatrix

    #include <iostream> using namespace std; #include <ctime> // Eigen 部分 #include <Eigen ...

  3. SAP云平台对Kubernetes的支持

    截至本文发稿(2019-2-10, 农历大年初六)时为止,访问SAP云平台的官方网站:https://cloudplatform.sap.com/enterprise-paas/kubernetes. ...

  4. sql 获取每个分组的前N条记录的写法

    SELECT * FROM ( --根据 tb表的name进行分组,根据年龄排序 SELECT * , ROW_NUMBER() OVER ( PARTITION BY name ORDER BY a ...

  5. CentOS下go 安装

     go 语言源码安装依赖 ,gcc ,make glibc库,等,上述工具安装省略,另外,其源代码更新采用的是mercurial 工具,安装前先安装mercureal :   1.mercurial安 ...

  6. BZOJ1614:[USACO]Telephone Lines架设电话线(二分,最短路)

    Description FarmerJohn打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司 支付一定的费用.FJ的农场周围分布着N(1<=N< ...

  7. ecshop 中如何禁用右键和F12

    找到 网站根目录/themes/js/common.js,在最后加入如下代码: //禁用右键和F12 //方法一 document.oncontextmenu = function () { retu ...

  8. Cow Relays 【优先队列优化的BFS】USACO 2001 Open

    Cow Relays Time Limit: 1000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Others) Tota ...

  9. mac 系统安装selenium注意事项

    mac最新系统:OS X EI Captian python: 本机自带的python2.7. (本来想升级3.5,觉得太复杂,放弃了) pip: https://pypi.python.org/py ...

  10. es6之数组方法

    //兼容插件 babel-polyfill values()等存在兼容问题,需要加载babel-polyfill插件 .keys()  获取数组的key值 .values()  获取数组的value值 ...