canvas解决字体默认是系统设置字体

于 2024-05-21 15:18:44 发布
阅读量103 收藏
点赞数 1
分类专栏： uniapp js 微信小程序 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32707555/article/details/139093720
版权
uniapp 同时被 3 个专栏收录
58 篇文章 0 订阅
订阅专栏
js
38 篇文章 0 订阅
订阅专栏
微信小程序
17 篇文章 1 订阅
订阅专栏

如果手机设置了非默认字体，例如行体宋体钢笔等等字体，在用canvas的时候会把系统的字体默认到里面去，这个时候为了做统一，统一成初始系统字体。

let ctx = ...
//加粗 20px 字体
ctx.font = 'bold 20px serif'

不知道为啥，设置成Arial和sans-serif都不行

空&白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 使用Canvas在图片上绘制文字的方法
01-05
在Android SDK中使用Typeface类来定义字体，可以通过常用字体类型名称进行设置，如设置默认黑体： Paint mp = new paint(); mp.setTypeface(Typeface.DEFAULT_BOLD) 常用的字体类型名称还有： * Typeface.DEFAULT /...
【js】canvas字体不生效，解决字体加载过慢问题
这道题我不会做...不会做啊..太难了！！
04-14 2294
问题 使用@font-face引入外部字体后，因为加载需要时间，而script中canvas字体渲染时，没有检测到引入的字体，将会使用默认字体 @font-face { font-family: 'en'; src: url('./font/font.ttf'); } let canvas = document.querySelector('canvas') let ctx = canvas.getContext('2d') ctx.clearRect(0, 0, 200, 200) ctx.
微信小程序 canvas设置字体无效问题
guoqing的博客
04-28 3764
在使用canvas画海报图的时候有一些特殊字体，但是，无论使用方法引入还是css直接引用，都无效。 ctx.font = "normal 20px 'SourceHanSerifCN'"; 后面发现，在方法内引入时需要设置scopes参数，默认为webview还需要额外加上native即可 wx.loadFontFace({ global: true, family: 'SourceHanSerifCN', source: 'url("xxx.OTF")', scopes:
canvas学习（十）：font字体设置
总有一天，你的日积月累，会成为别人的望尘莫及
08-10 1万+
canvas中的字体设置比较简单，这里就不说别的了，直接上实例代码： window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ //宽高自适应 //myCanvas.width = document.document...
Android中设置字体居中,Android setTextSize方法：设置字体大小、setTypeface方法：设置字体样式和canvas.drawText（）字体设置居中...
weixin_39640444的博客
05-25 992
setTextSize方法：设置字体大小canvas【功能说明】该方法用于设置画笔的字体大小。该方法主要用在绘制字符串的场合，对于一些图形则没有效果。字体【基本语法】public void setTextSize (float textSize)spa其中，参数textSize为字体大小，浮点型数据。对象【实例演示】下面经过代码来演示如何设置字体大小。ciprotectedvoidonDraw(C...
[微信小程序]手机系统默认字体的设置
史喜超的博客
06-13 8671
font-family:Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif!important; 微信小程序使用系统...
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
01-03
canvas肯定要一个画板容器啦，记得设置宽高哦，小程序中默认宽高是300px和150px js：在page中 //处理文字多出省略号显示 dealWords: function (options) { options.ctx.setFontSize(options.fontSize);//设置字体...
Android TextView 去掉自适应默认的fontpadding的实现方法
01-04
最近在项目中使用textview时发现在使用Android:layout_height=”wrap_content”这个属性设置后，textview会有默认的padding，也就是fontpadding。这样就会造成textview和其他view中间的间距会比自己的设置的大。那么...
canvas-emoji:节点画布绘制表情符号
05-31
$ npm install -save canvas-emoji 默认情况下，将下载适用于 macOS、Linux 和 Windows 的二进制文件。 如果您想从源代码构建，请使用npm install --build-from-source并查看下面的编译部分。 所需的 Node.js 最低...
canvas-latex：为HTML5的画布带来快速漂亮的数学排版
02-03
） 节点画布FabricJS 原始画布API建设者const widget = new Widget(latex: string, options: object) 选项： 名称类型默认描述baseSize {Integer} 44 乳胶渲染的基本字体大小。 注意：根据特定的乳
uni-app三级联动笔记
热门推荐
空&白的博客
09-09 1万+
uniapp官方组件picker uniapp使用三级联动picker，官方文档省市区选择器不适用5+app、h5和支付宝小程序，必须适用插件（日期、时间、三级联动picker）（mpvue-picker） 日期、时间、三级联动picker这个插件有个注意的事项，用HBuilderX导入插件的时候，会覆盖掉page/index/index.vue这个文件，需要注意。 日期、时间、三级联动picke...
uniapp关于iphone底部安全区域
空&白的博客
11-17 1万+
项目要在底部(tabbar之上)做一个固定的按钮，在一般手机下，样式没问题。在iPhone xr和iphone11下，就出现位置不正确，问题是iphone多了一个安全区域问题 大概是这一块。也是算在整个page高度里的，如果不加这个高度，那么固定定位的位置就会比原先的低（所以说，项目还是要真机测试才准确，模拟器测不准）。 解决：https://ask.dcloud.net.cn/article/36494 解释个说明：var(–safe-area-inset-bottom) 安全区域的高度，直接带单位（px
uni-app用canvas截屏并且分享好友
空&白的博客
09-27 1万+
最近做一个app，需要截取页面保存为图片，然后分享给好友。 uni-app官网https://uniapp.dcloud.io/ 那么进入正题 首先是页面的ui图 需要的白色区域截图并且保存图片发给好友。 那么就要用到canvas进行画图，图片的话可以使用drawImage设置背景图 第一步，创建画布 <template> <view> <canvas clas...
uniapp使用canvas的一些问题
空&白的博客
11-26 8174
1、canvas无效，出不来 修改前： let ctx = uni.createCanvasContext('shareCanvas'); 修改后： let ctx = uni.createCanvasContext('shareCanvas', this); 在自定义组件下，第二个参数传入组件实例this，若不传，则无法显示 2、canvas绘制图片（drawImage）无效，显示不了 修改前： let imageW=uni.upx2px(456)//图片的尺寸 let imgUrl=this.sha
记录用户上次看视频的进度，并且从记录的时间继续观看
空&白的博客
03-13 5495
记录用户上次看视频的进度，并且从记录的时间继续观看
uniapp使用Painter画板
空&白的博客
12-19 4221
首先介绍下Painter画板，uniapp 海报画板，可根据自身需求配置生成海报（懒得再写，copy官网的） Painter画板官网：http://liangei.gitee.io/limeui-docs/components/painter/ Painter画板在uniapp插件市场的地址：https://ext.dcloud.net.cn/plugin?id=2389 很好用的一个插件。 安装引入插件不多说，直接说一些使用Painter画板遇到的问题和笔记。 这边有个重要的提示，绘画的时候，要先从层级最
uniapp遇到的一些问题
空&白的博客
10-26 4184
问题1、文件查找失败，缺少axios模块 解决：在uniapp项目中，运行命令行npm install axios，安装axios模块。 问题2、缺少scaa/sass插件 解决：在uniapp的插件市场找到scss/sass编译，导入插件。
解决数据修改，但是视图未更新
空&白的博客
05-02 3535
在uniapp或者vue中，有时候会遇到数据修改，但实际上视图的数据未更新的情况。 例如： 直接赋值就不会改变视图。 用this.$set()后，就可以更新视图。 但是当this.list.time有设置默认值时，不管直接是直接赋值还是用set()，都可以修改视图。emmmmm 算了，我鶸，就不追究原因了= =。 ...
解决css背景图覆盖文字
最新发布
空&白的博客
05-16 2856
项目需求：这是个导航栏（下面是uveiw的tabs标签），然后高亮的时候会有一个背景图，因为title不固定字数，所以宽度不能写死。后面找了下，发现item-title样式加上position: relative;因为用的是相对、绝对定位，会导致图片会覆盖到文字上。自己写了个样式，用scroll-view，
修改Unity默认字体
05-16
要修改Unity的默认字体，可以按照以下步骤进行操作： 1. 在Unity中创建一个新的场景并选择其中的一个UI元素。例如，选择一个Text元素。 2. 在Inspector面板中，展开Text组件，找到Font属性。 3. 点击Font属性旁边...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值