解决uniapp开发h5页面时使用canvas字体显示大小有误问题

最新推荐文章于 2024-06-27 15:57:20 发布
最新推荐文章于 2024-06-27 15:57:20 发布
阅读量2.6k 收藏
点赞数
分类专栏： 前端 h5 文章标签： html5 uniapp canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyandgh/article/details/103835031
版权
前端 同时被 2 个专栏收录
33 篇文章 2 订阅
订阅专栏
h5
4 篇文章 0 订阅
订阅专栏

背景

用uniapp开发h5页面，如果你使用canvas画图，可能会用到canvasContext.setFontSize()这个函数，经过测试，如果设置的size是小数，那么在csdn、知乎等内置浏览器中访问，字体大小是不正确的。

解决方法

用Math.round()等取整函数，将小数转为整数，再赋值。

建议

最好使用canvas中，涉及数字的都取整，不要用小数，以免出现其他问题!

HouGISer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
uniapp使用canvas画海报
Yadira9的博客
01-18 978
文章将介绍canvas的基本使用，提供各种形状，canvas画网络图片、二维码，保存图片到手机的方法。
canvas 真机上设置文字“粗体”无效
weixin_43923808的博客
09-29 2740
【代码】canvas 真机上设置文字“粗体”无效。
小程序 CanvasContext 字体大小设置不了的原因及解决方法
最新发布
m0_67219457的博客
06-27 540
小程序 CanvasContext 字体大小设置不了的原因及解决方法
canvas文字绘制（大小、粗体、倾斜、对齐、基线）
热门推荐
一起coding，一起嗨。
08-09 2万+
canvas文字绘制文字填充方式、字体各种设置属性。
uniapp canvas 手写毛笔字效果 根据触屏时长改变笔画粗细
weixin_42244510的博客
08-20 2060
<template> <view @touchmove.stop.prevent="moveHandle"> <view class="signature" v-show="showCanvas"> <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="canvas"&.
使用for循环绘制一个小迷宫_干货 | 用uni-app制作迷你PS小程序
weixin_39942191的博客
11-22 203
该文章主要讲解最近基于 uni-app 框架编写的集图文拖拽等多方位编辑、油墨电子签名、开放式海报于一体的小程序的制作思路和实现代码。1、完整源码链接：完整代码：https://github.com/TensionMax/mini-ps其中演示的文字编辑、图片编辑、油墨电子签名、开放式海报可单独使用，含文档说明。2、实现思路该工具主要由五个不同组件模块：文字编辑、图片编辑，油墨电子签名、控制、开放...
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
- 需要注意的是，由于uniAPP运行在H5环境下，所以html2canvas的基本用法和在Web应用中是相似的，但可能需要处理一些与原生环境相关的兼容性问题。 - 为了截取整个页面（包括滚动内容），需要先计算页面的总高度，...
详解使用双缓存解决Canvas clearRect引起的闪屏问题
01-19
今天用 canvas 做 H5 的时候遇到了闪屏问题。闪烁效果如下图：   问题简介 功能简介 H5 该部分的功能为：通过点击二级菜单，切换图片的遮罩或者更换背景。 因为功能简单，所以用了原生 canvas 实现这个功能。但在...
微信小程序canvas.drawImage完全显示图片问题的解决
10-17
主要介绍了微信小程序canvas.drawImage完全显示图片问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解canvas drawImage()方法绘制图片不显示的问题
09-22
主要介绍了详解canvas drawImage()方法绘制图片不显示的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序 canvas 设置 字体 字号加粗
solocao的专栏
03-31 1万+
之前的版本使用 现在直接使用CanvasContext.font即可 例如 this.ctx2.font = 'normal bold 40px sans-serif';
uniapp常用文字方法总结
weixin_66751373的博客
11-14 1155
1）小型大写字母（就是先把字母变成大写，再把字体改小）：font-variant:small-caps;2）删除线：text-decoration:line-through。2）首字母大写：text-transform:capitalize;3）转换成大写：text-transform:uppercase;4）转换成小写：text-transform:lowercase;1）下划线：text-decoration:underline。3）上划线：text-decoration:overline。
uniapp开发微信小程序设置字体踩坑记录
ㄏ、Forgetˊ的博客
11-30 5505
最近接到一个需求，需要在微信小程序中做出用户可自定义缩放旋转图片和文字的定制功能，开发使用uni-app，这里记录几个问题。 一、canvas设置字体大小需数值需为整数 使用canvas渲染文字时，需要设置文字的字体 let ctx = uni.createCanvasContext('canvas') ctx.font = '16px Arial' // 设置成功 ctx.font = '16.66px Arial' // 这样写会触发警告，不生效 二、字体集font-family兼容的问题 微信小程序
uniapp部分安卓字体加粗问题
weixin_45728995的博客
06-24 1441
uniapp字体加粗
canvas引入外部字体无效解决方法
dearbaba_11的博客
10-01 1433
canvas引入外部字体无效解决方法
canvas文字换行，多图片加载，显示错乱、或被覆盖的问题
u012685692的博客
04-17 671
【代码】canvas文字换行。
处理 canvas使用外部字体，外部字体加载不及时
01-17 1070
处理 canvas使用外部字体，外部字体加载不及时
uniapp使用canvas绘图在app端背景和文字无法绘制
xiyan_yu的博客
07-06 641
uniapp使用canvas绘图在app端背景和文字无法绘制
uniapp h5 html2canvas
07-15
### 回答1： UniApp是一种基于Vue.js的跨平台开发框架，可以用于开发微信小程序、H5、安卓和iOS应用。H5是一种基于HTML、CSS和JavaScript的网页开发技术，可以在支持HTML5的浏览器中运行。 Html2canvas是一个JavaScript库，可以将HTML元素转换为Canvas图像。通过使用html2canvas，可以将H5页面中的HTML元素截图，并将其转换为Canvas图像，从而实现一些有趣的效果和功能。 在UniApp中使用html2canvas可以实现一些独特的功能。例如，可以将H5页面上的特定元素转换为Canvas图像，并将其保存为图片或在页面上展示。这对于一些需要在应用中操作和处理截图的功能非常有用。 使用html2canvas还可以实现H5页面的模板分享功能。通过将H5页面转换为Canvas图像，可以将页面保存为图片，并通过分享功能分享给其他用户，实现页面内容的传播和分享。 总之，UniApp和html2canvas的结合可以为开发者提供更多有趣和实用的功能。无论是实现特定元素的截图，还是实现页面内容的分享，都可以通过使用这两种技术来实现。这对于开发具有创新和交互性的H5应用来说是非常有帮助的。 ### 回答2： Uniapp是一种跨平台的开发框架，可以用于开发移动端和Web端应用。而HTML2Canvas是一个将HTML元素转换为Canvas图像的JavaScript库。 在Uniapp中，我们可以使用HTML2Canvas库来实现H5页面元素的截图功能。首先，我们需要在Uniapp项目中引入HTML2Canvas库的代码。可以通过npm安装HTML2Canvas库，然后在需要使用的页面中导入该库。 接下来，在需要截图的页面中，我们可以通过选择器或者获取元素的DOM对象将需要截图的元素传入HTML2Canvas的API函数中。HTML2Canvas会将传入的元素转换为Canvas图像。 然后，我们可以获取到转换后的Canvas对象，通过Canvas提供的toDataURL方法将其转换为DataURL格式的图片数据。我们可以将DataURL格式的图片数据传递给后端进行保存、上传或者展示。 需要注意的是，由于Uniapp是跨平台开发框架，HTML2Canvas库在不同平台上的兼容性可能存在差异。在使用HTML2Canvas时，需要测试兼容性并进行适当的调整。 总结起来，Uniapp和HTML2Canvas的结合可以实现在H5页面中将HTML元素转换为Canvas图像的功能，可以实现元素截图、保存等操作。 ### 回答3： uniapp是一个跨平台的开发框架，它基于Vue.js，可以用于开发多个平台上的应用程序，包括H5、小程序、App等。而html2canvas是一个JavaScript库，可以将网页中的内容转换为图片。 在uniapp中使用html2canvas可以实现将H5页面的内容生成图片的功能。首先需要将html2canvas库引入到uniapp的项目中。然后需要在需要生成图片的页面中调用html2canvas的相关方法，将页面内容转换为图片。生成图片后，可以通过uniapp的API将图片保存到本地或者上传到服务器。 使用html2canvas生成图片可以应用于一些场景，比如制作截图功能、生成分享图等。比如，我们可以在uniapp的H5页面中添加一个“生成图片”按钮，当用户点击按钮时，调用html2canvas将页面内容转换为图片，并将图片保存到本地或者分享出去。 值得注意的是，由于html2canvas是通过解析网页中的DOM结构来生成图片的，所以在使用过程中需要注意一些限制和兼容性问题，比如图片中可能不包含视频、动画等一些特殊的元素，以及一些浏览器的兼容性问题。 总之，使用uniapp结合html2canvas可以实现在H5页面中将网页内容转换为图片的功能，为开发者提供了更多的可能性和灵活性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HouGISer

HouGiser需要你的鼓励~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值