小程序坑-canvas

Travis 发布于2019-08-21 17:22 / 1136人阅读

摘要：中单位问题在中绘制的单位都是，但由于不同屏幕的像素比不同，在小程序中样式我们使用的单位是，所以在中就需要把换成对应的由于可以根据屏幕宽度进行自适应，规定屏幕宽为，所以换算成的公式是屏幕宽度这一点在小程序的官方文档也有讲到屏幕宽度可以使用获取

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();  
    },

云服务器私有云小程序小程序小程序附近小程序门店小程序小程序小程序打开小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89421.html

[填坑手册]小程序Canvas生成海报（一）---完整流程

摘要：海报生成示例最近智酷君在做小程序生成海报的项目中遇到一些棘手的问题，在网上查阅了各种资料，也踩扁了各种坑，智酷君希望把这些填坑经验整理一下分享出来，避免后来的兄弟重复掉坑。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海报生成示例最近智酷君在做[小程序]canvas生成海报的项目中遇到一些棘手的问题，在网上查阅了...

shleyZ 2019-08-26 13:54 评论0 收藏0
20181012微信小程序填坑手册～

摘要：全屏蒙版弹窗遮不住的层级还是很高的，当出现全屏蒙版弹窗时，是无法盖住的，可以调用微信的，不过需要注意兼容低版本在类设置的颜色并没有变化。从6月份开始到现在，写小程序将近4个月了开发时给自己埋了不少坑～给大家分享下我的填坑经验～～开发部分 1.小程序的组件修改不能触发页面刷新？需要在父级文件上保存下才会触发（使用wepy开发） 2.接口请求出现的问题？记得勾选调试开发工具上不校验...

刘玉平 2019-08-23 12:19 评论0 收藏0
小程序中echarts+canvas 合成图片保存下载

摘要：再网上参考了一篇文章小程序实现页面转化图片并保存到相册根据这篇文章的内容，修改源码，针对安卓机型写了兼容的配置，如果你的页面只有一个图表，就完全可以成功转换了，如果是多个请修改的源码，方法选择就可以了。最近做的小程序项目在echarts合成图片的时候遇到了一些问题，综合了很多网友的经验，在此分享一下我的经历，如有错误，欢迎指正。 1.在小程序中引入echarts组件请参考 echa...

neu 2019-08-26 10:12 评论0 收藏0
微信小程序海报生成踩坑记

摘要：最近有个需求是要生成分享海报，让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求，可是万万没想到，微信会这么坑。最近有个需求是要生成分享海报，让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求，可是万万没想到，微信会这么坑。刚开始的思路是这样的：后台根据小程序传过来的参数获取对应的小程序码，然后与背景图合成之后将base64格式的图片传给小程...

lidashuang 2019-07-01 10:45 评论0 收藏0