此功能并没有做所有机型测试,后面会一个一个做一下,如需使用请先自作测试!

canvas在小程序中设定的尺寸默认是px 并不是rpx的

所以需要转换一下

PS:设计稿是750像素

wx.getSystemInfo({
success: function (res) {
var v =750 / res.windowWidth;//设计稿尺寸除以 当前手机屏幕宽度
function shiftSize(w) {
return w / v;
} //例子
//绘制文字
function fillFont(k) {
ctx.font = 'bold 32px Arial';
ctx.fillStyle = '#fff';
//从设计稿量取的实际尺寸
ctx.fillText("100%", shiftSize(236), shiftSize(330));
}
}
})

  

微信小程序 canvas 内容(宽高) 兼容不同机型的更多相关文章

  1. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

  2. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  3. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  4. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  5. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  6. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  7. 微信小程序 canvas 绘图问题总结

    业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将 ...

  8. 微信小程序 | canvas绘图

    1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 ...

  9. 微信 小程序 canvas

    测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的ca ...

随机推荐

  1. 谈谈java做登录那些事(一 分析)

    前言: 最近要给自己的网站模板写一个登陆功能,其他功能已经写了一半了,我觉得可以写个登陆整合一下了. 借鉴博客:https://www.cnblogs.com/moyand/p/9047978.htm ...

  2. 从源码看springboot默认的资源文件和配置文件所在位置

    首先,使用的springboot版本是2.X,在这里写一点学习springboot的记录 springboot需要配置的不多,但也并不是完全不需要配置就可以顺畅使用,这里看一下它默认的配置 首先,看一 ...

  3. webBrowser兼容

    using Microsoft.Win32; using System; using System.Collections.Generic; using System.ComponentModel; ...

  4. python之路day02--格式化输出、初始编码、运算符

    格式化输出 格式化输出替换字符串.字符串中%占位符,,%%s就是代表百分号,不代表占位符s 字符串 stringd 数字 dight name = input('请输入你的名字:') age = in ...

  5. django系列7:修改404页面展示,优化模板,降低urlconf和模板之间的耦合,命名app将模板和app绑定

    为了增加程序的友好和健壮性,修改view代码,处理以下如果出现404,页面的UI展示. 修改view代码 from django.http import Http404 from django.sho ...

  6. mysql 端口修改

    mysql 修改端口 1.  停止mysql服务 2.  打开文件夹下my.ini文件.(E:\mysql-5.7-3307) 修改文件中的port值,注意两个地方: [client]default- ...

  7. tolua之wrap文件的原理与使用

    什么是wrap文件 每个wrap文件都是对一个c#类的包装,在lua中,通过对wrap类中的函数调用,间接的对c#实例进行操作. wrap类文件生成和使用的总体流程 生成一个wrap文件的流程 这部分 ...

  8. MongoDB3.6 一键化自动部署方案

    1.系统基础配置 下面的命令默认都使用root用户进行操作,操作系统为Centos7,mongodb3.6.x以上版本 1.1 修改系统配置文件/etc/security/limits.conf和/e ...

  9. Linux运维(首页)

    系统学习,以此见证学习历程 Linux运维基础 安装vmware+centos Linux基础 Linux的一些问题 Ubuntu遇到的bug linux_网易云音乐安装 linux_添加图标 遇到的 ...

  10. [再寄小读者之数学篇](2014-06-23 积分不等式 [中国科学技术大学2013年高等数学B 考研试题])

    设 $f(x)$ 在 $[a,b]$ 上一阶连续可导, $f(a)=0$. 证明: $$\bex \int_a^b f^2(x)\rd x\leq \cfrac{(b-a)^2}{2}\int_a^b ...