小程序坑-canvas
canvas中单位问题
在canvas中绘制的单位都是px,但由于不同屏幕的像素比不同,在小程序中样式我们使用的单位是rpx,所以在canvas中就需要把rpx换成对应的px;由于rpx可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx,所以rpx换算成px的公式是:
1rpx = 屏幕宽度 / 750
这一点在小程序的官方文档也有讲到:https://mp.weixin.qq.com/debu...
屏幕宽度可以使用wx.getSystemInfoSync();
获取;
所以例如在样式中你的canvas宽度650rpx,那么在canvas中绘制使用的宽度就是:(屏幕宽度 / 750)* 650
;
如何在canvas上弹窗
由于canvas组件是小程序创建的原生组件,它的层级是最高的,其他不是原生的组件都没法盖住它,但有些使用我们要必须在上面弹窗,那这时怎么办呢???
解决办法:
在弹窗时将canvas转换成图片并隐藏,使用image标签代替canvas,这样弹窗就可以盖在上面啦!!!
使用wx.canvasToTempFilePath将canvas临时转为图片(https://mp.weixin.qq.com/debu...)
这里要注意一个问题,参数中的width、height等等单位都是px,需要使用上面将的方式转换。
如何划一条流畅的曲线
修改之前
修改之后
如果我们像将一条折线变得流畅应该怎么做呢?
这里涉及到1. 头尾的圆滑 2. 折线处的平顺;
- 头尾的圆滑:
ctx.setLineCap('round')
- 折线处的平顺:
ctx.setLineJoin('round')
两个api的文档说明:
https://mp.weixin.qq.com/debu...
https://mp.weixin.qq.com/debu...
如何划虚线
由于小程序划虚线的API需要基础库1.6.0才开始支持,所以需要自己实现
/*** * @param {*} context canvas上下文* @param {*} x1 起点x* @param {*} y1 起点y* @param {*} x2 终点x* @param {*} y2 终点y* @param {*} dashLen 虚线每段的长度 */drawDashLine(context, x1, y1, x2, y2, dashLen) { const getBeveling = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));dashLen = dashLen === undefined ? 5 : dashLen; //得到斜边的总长度 var beveling = getBeveling(x2-x1,y2-y1); //计算有多少个线段 var num = Math.floor(beveling/dashLen); for(var i = 0 ; i < num; i++) { context[i%2 == 0 ? 'moveTo' : 'lineTo'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i); } context.stroke(); },
小程序坑-canvas相关推荐
- 小程序05 canvas绘图并保存到相册
小程序现在没有提供直接分享到朋友圈的接口,所以只能采取折中的策略,即先将要分享的内容先保存为图片,保存到用户相册,然后再由用户将该图片分享到朋友圈 生成小程序码需要access token,后端生成比 ...
- 小程序利用canvas实现波浪动态图,原生canvas的部分限制
小程序利用canvas实现波浪动态图 小程序的canvas与该动态图的问题 首先上效果图片 下面直接上代码 小程序的canvas与该动态图的问题 小程序的canvas与html的canvas实现是完全 ...
- 微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档 发现两种途径 需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
- 小程序使用 canvas 给图片添加水印
小程序使用 canvas 给图片添加水印 操作 canvas 相关的 api 使用的是微信最新提供的 (一路过来踩了好多坑-) 浅用微信小程序 canvas 给图片添加简单水印, 废话不多说, 先上效 ...
- 小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧 最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
- 关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
- 小程序坑集【日常总结,持续更新(11.08更新)】
大家好,上班的日子总是过的那么快,夹杂着一个多请了四天假的国庆节,转眼距离上篇博文又过去一个多月了,惭愧啊.之前萍子写过一篇[小程序跳H5页面]的博文,说来也是无心在结尾的时候,回想那些被小程序折磨的 ...
- 微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
最新文章
- 思考:行业客户项目中的代理商(国外厂商)
- 第二十四课:能量和功率
- eeglab中文教程系列(9)-绘制ERP图像
- Sendmail+dovecot+saslauth+rainloop
- 计算机小组作品,计算机兴趣小组小作品汇总.doc
- 【转载】从百度、360、搜狗对新站态度看国内搜索引擎技术现状
- 《知识图谱》赵军 目录
- struts2在页面显示网页编辑器发布的内容
- 面试官:Redis 主从复制时网络开小差了怎么整?
- 以太坊—JSON RPC API
- pytorch 中nn.MaxPool1d() 和nn.MaxPool2d()对比
- Ubuntu如何查看端口已经开放
- Qt入门教程100篇(已完结)
- MICRO SIM卡 SIM小卡 尺寸图及剪卡图解
- DMA小区漏损治理之武林秘籍
- 基于opencvsharp的景深融合
- Chris and Magic Square CodeForces - 711B
- 微信小程序高度自适应布局
- 互斥锁的概念和使用方法。
- matlab实现图像DCT变换
热门文章
- 华北计算机系统工程研究所录取名单,2018年华北计算机系统工程研究所接收推免研究生复试录取通知...
- solr 高并发_你真的了解并发编程吗?
- python递归查找值返回_python – 从树递归中返回值列表
- pat甲级什么水平_转让河北工程设计建筑行业(建筑工程)甲级资质
- 7z替换exe文件内容不能替换文件_windows/system32文件夹权限问题
- 数据库中union和union all的区别
- oracle将把varchar2字段(长度4000)改为clob类型
- VB 一行代码的诀窍
- 高通最强芯片855发布!AI性能比华为苹果翻倍,商用5G,标配屏下指纹
- 寻找最优秀AI公司 | 量子位2018年度评选启幕