HTML5 canvas 里面填充文字自动换行

每天瞎忙的农民工

已于 2024-01-15 10:53:42 修改

阅读量3.1k

点赞数

分类专栏：前端文章标签： HTML5 canvas 文字填充换行图形

于 2018-04-11 18:31:50 首次发布

本文链接：https://blog.csdn.net/Crazy_shark/article/details/79900923

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

function drawTextOn(t,x,y,w){

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

    mainCtx.font = "small-caps bold 15px Microsoft YaHei";
    mainCtx.fillStyle = "#333";
    mainCtx.textBaseline = "middle";

    for(var a = 0; a < chr.length; a++){
        if( mainCtx.measureText(temp).width < w ){
            ;
        }
        else{
            row.push(temp);
            temp = "";
        }
        temp += chr[a];
    }

    row.push(temp);

    for(var b = 0; b < row.length; b++){
        mainCtx.fillText(row[b],x,y+(b+1)*20);
    }

}

这个方法已经封装好了，可以直接调用