canvas畫的文字在ios移動裝置上無法顯示

2021-10-02 07:57:39 字數 523 閱讀 7058

專案中做了移動端rem適配的,然而發現電腦上可行,在蘋果手機上卻無法顯示,

查了一下,發現ios safari只支援標準的canvas,標準的canvas只支援px不支援rem。

上網找了一下,解決方法:

將rem轉換回px

//ui設計基礎寬度:750px;

ctx.font = 3*12.5+"px sans-serif";

但是移動端有各種寬度的螢幕,為了適應各種螢幕是不能寫死,所以最終下法應該如下:

//獲取裝置寬度

let clientwidth = document.documentelement.clientwidth;

//根據設計圖中的canvas font字型的佔比進行設定

let fontwidth = clientwidth*3*12.5/750;

//設定自適應的字型大小

ctx.font = fontwidth+"px sans-serif";

iOS畫矩形 直線 文字的方法

7488353 cgpoint畫直線 cgcontextref ctx uigraphicsgetcurrentcontext cgcontextmovetopoint ctx,point1.x,point1.y cgcontextaddlinetopoint ctx,point2.x,point2...

iOS畫矩形 直線 文字的方法

cgpoint畫直線 cgcontextref ctx uigraphicsgetcurrentcontext cgcontextmovetopoint ctx,point1.x,point1.y cgcontextaddlinetopoint ctx,point2.x,point2.y 畫曲線 用...

canvas繪製在畫布中心的一段文字

lang en charset utf 8 titletitle canvas style head width 600 height 400 canvas var mycanvas document.queryselector canvas var ctx mycanvas.getcontext ...