小程序用画布canvas生成海报

1.画布canvas生成的图片保存下来会模糊

       解决方法：把页面分成两块，一块是html页面，另一块是一个大画布（但是大画布隐藏起来，在页面浏览时不要展示出来），画布大小为屏幕的两倍（750*2）。这样用户浏览到该页面时展示的是html页面，点击保存图片时保存下来的确是大画布生成的图片。而大画布生成的图片肯定是比较清晰的。

       在网上找的一些资料这里他们是分成大小两个画布，展示时用小画布，保存图片时用大画布。但是经过本人实践发现该方法不利于处理屏幕兼容，因为手机屏幕的大小是不一样的。而做出来的画布不像我们平时写的html页面一样灵活，在处理屏幕兼容时需要大量的计算。所以这里建议用html页面加大画布的方法。

2.画布canvas的文本换行处理，动态计算文本宽高。

     在画布中，文本超出了区域是不会自动换行的，要手动判断文本的长度，对文本进行多段分割，每一段重新绘制。为了方便，本人已将文本的绘制封装到了一个方法里

     这里重点解释一下contentHeight形参是用来计算该文本生成的区域的高度的。因为有的画布是需要根据内容来动态计算高度的。调用该方法后会返回一个值，该值就等于传入的形参contentHeight的值加上文本生成区域的高度

// 多行字符换行  x,y字符串开始位置的x,y轴坐标， str字符串,  strWidth 单行字符串允许的最大长度,
//strSize字号大小,strLineHeight 行高，lineNum 行数, strColor字体颜色 ,contentHeight 返回的文本高度
    moreText: function (x, y, str, strWidth, strSize, strLineHeight, lineNum, strColor, contentHeight) {
        let _this = this;
        canvasMax.setFontSize(strSize);

        let widthA = 0; // 计算单行长度的中间变量
        let strs = [];   //用数组来装每一行的文字
        for (let i = 0; i < lineNum; i++) {
            let enter = str.search(String.fromCharCode(10)); //检测是否有换行
            if (canvasMax.measureText(str).width > strWidth || enter != -1) { //如果剩下的字符串宽度依然大于单行最大宽度或者有换行符号
                for (let j = 1; j < str.length; j++) {
                    widthA = canvasMax.measureText(str.substring(0, j)).width
                    if (widthA > strWidth || str.charCodeAt(j - 1) == 10) {
                        strs[i] = str.substring(0, j)
                        strs[i] = strs[i].replace(/[\n\r]/g, ' ')
                        str = str.substring(j, str.length);
                        if (i >= lineNum - 1 && canvasMax.measureText(str).width > 0) {
                            strs[i] = strs[i].substring(0, j - 2) + "...";
                        }
                        break;
                    }
                }
            } else {
                strs[i] = str;
                break;
            }
        }
        console.log(strs)
        canvasMax.setFontSize(strSize * 2);
        canvasMax.setFillStyle(strColor);
        for (let i = 0; i < strs.length; i++) {
            canvasMax.fillText(strs[i], 71 * 2, (y / scale + strLineHeight * i + strSize) * 2);
            _this.data.canvasAddHeight += strLineHeight;
            contentHeight += strLineHeight;
        }
        canvasMax.stroke(); //绘制已定义的路径
        return contentHeight;
    },