小程序坑-canvas

12

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

你可能感兴趣的

cgygd · 4月26日

所以例如在样式中你的canvas宽度650rpx,那么在canvas中绘制使用的宽度就是:(屏幕宽度 / 750)* 650 ;

请问高度换算怎么处理呢?
我的需求高度是750*983rpx,把一张网络图片绘制到画布上。
width = (屏幕宽度 / 750)* 750 ;
height = (屏幕高度 / 1334)* 500 ;
ctx.drawImage(result[1].path,0, 0,width,height);

这样换算在大部分设备还是比较正常,但是在一些高分辨率的设备,比如小米mix2s,iphone X,画出来的图片会被拉伸。

请问你是怎么处理的呢?

回复

载入中...