canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形

canvas的文字自动换行函数封装

//            str:要绘制的字符串
//            canvas:canvas对象
//            initX:绘制字符串起始x坐标
//            initY:绘制字符串起始y坐标
//            lineHeight:字行高，自己定义个值即可
            function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
                var ctx = canvas.getContext("2d");
                var lineWidth = 0;
                var canvasWidth = canvas.width;
                var lastSubStrIndex= 0;
                for(let i=0;i<str.length;i++){
                    lineWidth+=ctx.measureText(str[i]).width;
                    //减去initX,防止边界出现的问题
                    if(lineWidth>canvasWidth-initX*2.3){
                        ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
                        initY+=lineHeight;
                        lineWidth=0;
                        lastSubStrIndex=i;
                    }
                    if(i==str.length-1){
                        ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
                    }
                }
          }

vanvas画圆角矩形的函数封装

// 封装的一个用于绘制圆角矩形的函数.
            function roundedRect(x,y,width,height,radius,color,type){
              var ctx=this.ctx;
              ctx.beginPath();
              ctx.moveTo(x,y+radius);
              ctx.lineTo(x,y+height-radius);
              ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
              ctx.lineTo(x+width-radius,y+height);
              ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
              ctx.lineTo(x+width,y+radius);
              ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
              ctx.lineTo(x+radius,y);
              ctx.quadraticCurveTo(x,y,x,y+radius);
              ctx[type+'Style'] = color;
              ctx.closePath();
              ctx[type]();
            }

直接在html中用canvas画好的图，在手机端是不能实现直接长按保存到相册的。这里给出一种方法是：把canvas画好的图变成链接，引入img中，canvas隐藏，这样实现了canvas画图手机长按保存的效果。在这里，记录一个过程中遇到的问题，直接用设计稿的尺寸来定义画布大小，如果尺寸太大的话，手机上打开（只是说canvas画好的图未经过任何处理）会出现放不开的情况，只有手动缩放才能正常显示。遇到这个问题，尝试过canvas的缩放，不好使，最后也是通过上面的方法来解决的。

canvas把方形图片变成圆形图片展示

function circleImg(ctx, img, x, y, r){
    ctx.save();
    var d = 2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
}

canvas导出为图片

var canvas = document.getElementById('mycanvas');
var urlimg=canvas.toDataURL('image/png', 0.92);
document.getElementById("test").src = urlimg;

遇到的比较难解决的问题是canvas获取微信头像产生的跨域问题，头像是由微信的域名（http://wx.qlogo.cn/）返回的，这里会有冲突，会导致无法将生成的图片保存。

网上找了各种方法都不好使，加下面的跨域设置也不好使，微信的域名也不是固定不变的，所以最后考虑后台保存到本地服务器来解决跨域的问题。

img.crossOrigin = "Anonymous";   //跨域