不用担心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. 大数据平台搭建:Hadoop

    To construct big data distributed platform based on Hadoop is a common method. Hadoop comes fron Goo ...

  2. Ettercap结合sslstrip对ssl/https进行攻击

    Ettercap是一个非常强大的嗅探欺骗工具:在以往的ettercap的使用过程中,我们大多用来嗅探http,ftp,和一些加密比较简单的邮箱等的密码,对于新型的ssl/https等的加密协议就显得不 ...

  3. Kill占用指定端口的进程的方法

    (1)查询占用指定端口进程的PID 打开cmd命令行,输入netstat -ano|findstr 8080(指定端口号) 最后一列即为占用该端口的进程的PID (2)KILL指定PID的进程 紧接着 ...

  4. 【[SHOI2009]会场预约】

    同样是从试炼场点进来的,这是一道非常需要耐心的题 不过明明就是我太菜了,真正的大佬都是一眼秒吧 首先我们有一种比较常规的暴力思路,就是用线段树来维护区间连续子段数,而拒绝掉所有与当前区间相冲突的预约我 ...

  5. mvc读书笔记

    在mvc3的時候引入了Razor.Mvc4中默認的頂級目錄/controllers 保存那些處理URL請求的controller類/models 保存那些表示和操縱數據以及業務對象的類/views 保 ...

  6. web.xml中Filter的作用

    Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml文件配置好要 ...

  7. 【luogu P3366 最小生成树】 题解 Prim

    include include include include using namespace std; const int maxn = 505000; int n, m, dis[maxn], v ...

  8. HDU 1284 钱币兑换问题(普通型 数量无限的母函数)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1284 钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others)    ...

  9. nodejs 做的带管理后台的东东,主要学习到 ....我忘了学到什么了

    效果 http://www.steel-pot.com/ function handleStr(str,isHtml,callback) { if(!isHtml) { callback(str); ...

  10. Gradle Goodness: Init Script for Adding Extra Plugins to Existing Projects

    Gradle Goodness: Init Script for Adding Extra Plugins to Existing Projects Gradle is very flexible. ...