不用担心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. February 20 2017 Week 8 Monday

    Behind every beautiful thing, there's some kind of pain. 美丽背后,必有努力. No pains, no gains, and sometime ...

  2. multiGet(下载软件)

      下载软件 apt-get install multiGet

  3. spring的声明式的事物管理和编程事务管理的区别

    一.Spring对编程式事务的支持 Spring中的事务分为物理事务和逻辑事务: 物理事务:就是底层数据库提供的事务支持,如JDBC或JTA提供的事务: 逻辑事务:是Spring管理的事务,不同于物理 ...

  4. linux一切皆文件之文件描述符

    一.知识准备 1.在linux中,一切皆为文件,所有不同种类的类型都被抽象成文件.如:普通文件.目录.字符设备.块设备.套接字等2.当一个文件被进程打开,就会创建一个文件描述符.这时候,文件的路径就成 ...

  5. 【DP】:CF #319 (Div. 2) B. Modulo Sum

    [题目链接]:http://codeforces.com/contest/577/problem/B [相似题目]:http://swjtuoj.cn/problem/2383/ [题意]:给出n个数 ...

  6. BZOJ5299:[CQOI2018]解锁屏幕(状压DP)

    Description 使用过Android手机的同学一定对手势解锁屏幕不陌生.Android的解锁屏幕由3x3个点组成,手指在屏幕上画一条 线将其中一些点连接起来,即可构成一个解锁图案.如下面三个例 ...

  7. XXE攻防——XML外部实体注入

    XXE攻防——XML外部实体注入 转自腾讯安全应急响应中心 一.XML基础知识 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的 ...

  8. jar包解压

    jar -xvf project.jar 解压到当前文件夹

  9. RabbitMQ之五种消息模型

    首先什么是MQ MQ全称是Message Queue,即消息对列!消息队列是典型的:生产者.消费者模型.生产者不断向消息队列中生产消息,消费者不断的从队列中获取消息.因为消息的生产和消费都是异步的,而 ...

  10. 二十八、详述 IntelliJ IDEA 远程调试 Tomcat 的方法

    在调试代码的过程中,为了更好的定位及解决问题,有时候需要我们使用远程调试的方法.在本文中,就让我们一起来看看,如何利用 IntelliJ IDEA 进行远程 Tomcat 的调试. 首先,配置remo ...