小程序坑-canvas

发布于 2017-11-01  约 4 分钟

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();  
    }, 
阅读 15.2k发布于 2017-11-01

推荐阅读

2580 人关注
173 篇文章
专栏主页
目录