canvas函数封装（画圆形图片、文字换行）

1、画圆形图片

/**
 * 画圆形图片
 * @param {object} ctx canvas
 * @param {number} width 图像宽度
 * @param {number} height 图像高度
 * @param {number} x 开始位置
 * @param {number} y 结束位置
 * @param {string} url 图片地址
 */
function drawCircular(ctx,width,height,x,y,url) {
    var img_w = width;
    var img_h = height;
    var img_x = x;
    var img_y = y;
    ctx.save();
    ctx.beginPath();
    ctx.arc(img_w / 2 + img_x, img_h / 2 + img_y, img_w / 2, 0, Math.PI * 2, false);
    ctx.clip();
    ctx.drawImage(url, img_x, img_y, img_w, img_h);
    ctx.restore();
}

2、根据每行字符长度换行，或者用\n换行

/**
 * 文字换行，特例可用\n
 * @param {Object} ctx 画布对象
 * @param {String} text 文字
 * @param {Number}} x 开始位置
 * @param {Number} y 开始位置y
 * @param {Number} h 行高
 * @param {Number}} len 长度
 * @param {String} textAlign 对齐方式
 */
function drawText(ctx,text,x,y,h,len,textAlign='left'){
    ctx.font="22px SourceHanSansCN-Regular";
    ctx.fillStyle = '#010101'
    ctx.textAlign = textAlign;
    var n=Math.ceil(text.length/len)
    
    if(text.indexOf('\n')==-1){
        y=y-n*h
        for(var i=0;i<n;i++){
            var nowT=text.slice(i*len,(i+1)*len)
            ctx.fillText(nowT,x,y+i*h);
        }
    }else{
        var arr=text.split('\n')
        y=y-arr.length*h
        for(var i=0;i<arr.length;i++){
            ctx.fillText(arr[i],x,y+i*h);
        }
    }
}

3、根据宽度换行

/**
 * canvas文字换行
 * @param {object} context canvas
 * @param {string} t 渲染文字
 * @param {number} x 开始位置
 * @param {number} y 结束位置
 * @param {number} w 宽度
 */
function drawText2(context,t,x,y,w){

    var chr = t.split("");
    var temp = "";              
    var row = [];

    context.font = "20px Arial";
    context.fillStyle = "black";
    context.textBaseline = "middle";

    for(var a = 0; a < chr.length; a++){
        if( context.measureText(temp).width < w && context.measureText(temp+(chr[a])).width <= w){
            temp += chr[a];
        }//context.measureText(text).width  测量文本text的宽度
        else{
            row.push(temp);
            temp = chr[a];
        }
    }
    row.push(temp);

    for(var b = 0; b < row.length; b++){
        context.fillText(row[b],x,y+(b+1)*24);//字体20，间隔24。类似行高
    }

    // 只显示2行，加...
    /*for(var b = 0; b < 2; b++){
        var str = row[b];
        if(b == 1){
            str = str.substring(0,str.length-1) + '...';
        }
        context.fillText(str,x,y+(b+1)*24);
    }*/
}

 

来源：CSDN

作者：qq_41248310

链接：https://blog.csdn.net/qq_41248310/article/details/103779978