uni-app把canvas的px像素使用rpx表示

最新推荐文章于 2023-09-27 11:45:31 发布
最新推荐文章于 2023-09-27 11:45:31 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： uni-app 文章标签： 前端 css javascript canvas uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47753939/article/details/123091312
版权

小程序，移动端在设置canvas的位置的时候，因为cnavas默认是px像素，对于位置的设置很不方便，所以要把px转换为用rpx表示

1、获取设备宽度

const system = uni.getSystemInfoSync()

2、单位换算，算出1rpx = 多少px

const w = system.windowWidth / 750

3、使用

比如我要设置30rpx，则可以表为 30*w

Evan是一万
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas小程序自适应
weixin_45924425的博客
08-16 906
canvas在小程序自适应宽高，等比例的rpx
uniapp生成二维码，兼容rpx适配。
07-21
uniapp生成二维码，兼容rpx适配。
小程序使用 rpx 单位 转 px的方法（用于动画、canvas画图）
weixin_30394669的博客
03-27 554
1、需要借助的API：wx.getSystemInfoSync(); 通过API可获取的值： 1 // 在 iPhone6 下运行： 2 var systemInfo = wx.getSystemInfoSync(); 3 console.log(systemInfo.windowWidth); // 输出 375（单位 px） 4 // 在 iPhone6 Plus 下： 5 v...
使用canvas时, 如何用相对单位(rem, rpx)来适配不同机型
weixin_30929011的博客
07-31 1100
使用canvas的api时, 使用的都是绝对数值, 如: 方法传参是坐标位置，不带单位，如ctx.translate(10,10); 那么此时, 我就需要将rem或rpx 转换成 px; 首先, 获取设备宽度 h5:var clientWidth = document.documentElement.clientWidth; 小程序没有document对象, 所以要使用小程...
uni-app：canvas-绘制图形4（获取画布宽高，根据画布宽高进行图形绘制）
最新发布
weixin_46001736的博客
09-27 1575
uni-app：canvas-绘制图形3（获取画布宽高，根据画布宽高进行图形绘制）
小程序坑-canvas
weixin_34209851的博客
11-01 137
canvas中单位问题 在canvas中绘制的单位都是px，但由于不同屏幕的像素比不同，在小程序中样式我们使用的单位是rpx，所以在canvas中就需要把rpx换成对应的px；由于rpx可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx，所以rpx换算成px的公式是：1rpx = 屏幕宽度 / 750这一点在小程序的官方文档也有讲到：h...
uni-app echarts所有示例
11-30
本压缩包"uni-app echarts所有示例"包含的是uni-app与echarts的集成示例，这意味着你可以在这里找到如何在uni-app项目中使用echarts的各种例子。每个示例都是完整的，可以直接运行，这对于开发者来说是一份非常实用...
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
06-01
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
uni-app微信小程序生成海报.rar
02-07
总结来说，uni-app为微信小程序生成海报提供了便利，通过组合使用uni-app的组件、API以及Vue的特性，我们可以轻松地创建出具有吸引力的动态海报。在实际开发过程中，根据业务需求不断优化和调整，就能打造出满足用户...
uni-app-barcode:uni-app 条形码生成器
05-12
uni-app 条形码生成器 作者：诗小柒 支持H5、微信小程序、APP，其它平台的没有测试 使用canvas生成 不懂如何使用可以去直接打包下载运行 说明 此条形码组件的条形码生成部分移植改造自，精简了代码，移除无效属性，...
微信小程序canvas绘制自适应图片，UniApp canvas绘制自适应图片
weixin_47756693的博客
02-23 1501
微信小程序canvas绘制自适应图片， uniApp canvas绘制自适应图片
uniapp使用html2canvas截图，显示合同
weixin_43859097的博客
05-06 789
目前有个uniapp封装app里展示合同的需求，数据都在页面拼接展示，合同是写到页面里的，数据是活的。用到了html2canvas，renderjs后面可能还有一系列优化需求，持续更新附上官网PS（懒得再开文章）附上另一个展示合同需求：1.合同内容是docx形式展示，2.前端实现签名操作，3.后台合成签名图片和docx后在小程序展示。小程序签名，有现成的插件因为后台使用的插件不支持https，但小程序必须https，故后台设计了多步文件转换（这里前端先不考虑）方法思路如下：（有点绕）
uni-app 中 canvas的宽高如何设置为自适应尺寸
热门推荐
Bright2017的博客
04-27 1万+
最近在做混合APP，使用的是uni-app框架 今天在写canvas中，需要设置图片尺寸，但是尺寸需要根据屏幕宽度不同而改变，这里需要进行单位的换算，因为canvas中只能使用默认的px，这里需要计算一下 context.drawImage(img, 0, 0, 宽度，高度); //首先获取屏幕宽度 let device=uni.getSystemInfo(); let width...
uniapp微信小程序canvas生成简单海报并下载
qq_35946021的博客
05-05 1620
今天项目接到个任务，就是手写canvas海报，并能下载图片。百度了很多海报组件，都不尽人意。萌生了自己手写海报的想法。 话不多说先贴文档uni-app官网 其实该文档和微信小程序类似 最终效果，微信小程序可用，一个一个代码敲出来的。只要把原理掌握了，任何海报都能迎刃而解 1.准备环境 因为海报涉及到第三方的图片存储地址，所以要加白名单 downloadFile 里加你海报的根域名 记住一定要在这看看有没有加好白名单，刷新一下要不然还是会加载中空白的效果 话不多说上代码....
Vue与uniapp中如何使用canvas？
...
10-06 4248
Vue与uniapp中如何使用canvas？
uni-app 通过一个函数就可以方便的获取图片的exif和iptc信息包含gps地理位置等
qq_40994735的博客
10-15 1853
uni-app 获取图片的exif和iptc信息 的 js SDK 地址 导入 import { getImageData, getFloatLocationByExif } from '@/js_sdk/iz-exif/js_sdk/izExif/izExif.js' 运用 uni.chooseImage({ sizeType:['original'], success: (e) => { console.log(e) let src =
uniapp 获取图片的MD5
weixin_44402520的博客
06-12 578
获取图片的MD5 全局引入 在main.js import Sparkmd5 from './utils/spark-md5.js'; // vue原型链挂载 Vue.prototype.$Sparkmd5 = Sparkmd5 2.使用 uni.chooseImage({ count: 1, //默认9 crop:{ quality:100,//图片质量，1-100，默认80 width:1000,//图片裁剪宽度，单位px height:1000,//图片裁剪高度，单位px },
uni保存canvas图片_uni-app canvas生成图片的一些问题
weixin_39764603的博客
01-14 2206
最近在做一个截图功能，发现uni-app分享自定义图片还是有点问题APP端的分享和微信小程序分享还是有点不同的，这里APP测试用的是安卓手机下面列举下我遇到的问题1.draw函数的回调不执行一般都是ctx.draw(false,()=>{})的方式执行，但是打印半天都不进入，发现是回调函数的问题，查了一会，最终还是在微信社区找到了解决方案，那就是强制执行函数ctx.draw(false,((...
uni-app中使用canvas画
05-03
在 uni-app 中使用 canvas 画图，可以使用原生的 canvas API，也可以使用 uni-app 提供的封装组件 uni-canvas。 使用原生的 canvas API，需要在页面中添加一个 canvas 标签，并在 JS 中获取 canvas 对象，然后就...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值