不用担心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. SAP CRM One order里user status和system status的mapping逻辑

    Below example show: How the mapping relationship between User status and System status maintained in ...

  2. sublime text html5开发学习 插件篇记录

    1.第一步先按照 Package Control,具体步骤自行百度,Google. 2. view in browser 默认的快捷键应该是这样的,我用的是IE浏览器.所以ctrl+alt+i 即可让 ...

  3. 理解Underscore中的flatten函数

    最近是在所在实习公司的第一个sprint,有个朋友又请假了,所以任务比较重,一直这么久都没怎么更新了,这个周末赖了个床,纠结了一会儿决定还是继续写这个系列,虽然比较乏味,但是学到的东西还是很多的. 之 ...

  4. 对HandlerExecutionChain类的理解分析

    HandlerExecutionChain类比较简单,好理解. ==================================================================== ...

  5. 「LG4782 模板 2-SAT 问题」

    题目 来学\(2\)-\(sat\)了 这个东西确实不难 这个算法就是给你一堆\(bool\)变量\(x_1,x_2...x_n\),之后给你一些限制 限制的形式就是给你一对\((u,o1,v,o2) ...

  6. PHP-----TP框架基础

    TP框架基础 把Thinkphp框架的压缩包解压到php文件夹下----www目录下.   Thinkphp文件夹都有什么呢??? (所有用TP框架做的程序,要访问程序里面的网页.内容的话,全部要走这 ...

  7. PHP----作业:查询数据显示在页面上

    作业: 查询INFO表所有数据,显示在页面上(表格)性别要显示男女 民族 显示民族名称 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  8. CentOS 7安装简介及基本操作

    计算机基本概念: 1.计算机硬件组成: 2.计算机系统结构: 3.操作系统的功能:硬件驱动.进程管理.内存管理.网络管理.安全管理.文件管理等. 4.OS通用目的的软件程序:用户<-->应 ...

  9. ASP.NET Core中怎么实现Url rewrite功能

    我们可以使用ASP.NET Core的中间件来实现Url rewrite功能,下面我们定义一个中间件ReplaceQueryStringMiddleware来替换Http请求中的Url参数即Query ...

  10. Vue教程:指令与事件(二)

    一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...