小程序坑-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. 折线处的平顺；

1. 头尾的圆滑：ctx.setLineCap('round')
2. 折线处的平顺：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();  
    },