canvas画布替换文字

 

<p id="p1">JShaman是专业的JavaScript代码混淆平台，用于JS加密、JS混淆。</p>

 

//将指定文字换成canvas
function word_2_canvas(target,word,index){
    var c1 = document.createElement("canvas");
    //Canvas的大小
    c1.width = 16;
    c1.height = 20;
    c1.id = "c"+index;
    c1.style="vertical-align: text-top;"
    document.body.appendChild(c1);
    var t1 = document.getElementById("c"+index).outerHTML;
    c1.id = "";
    document.getElementById(target).innerHTML = document.getElementById(target).innerHTML.replace(word, t1)
}
//以canvas上画出文字
function canvas_fill_word(word,index){
    var c2 = document.getElementById("c"+index).getContext("2d");
    //字体和大小
    c2.font = '16px Microsoft YaHei';
    //在Canvas上绘制文本
    c2.fillText(word, 0, 17);
}
word_2_canvas("p1","淆",1);
word_2_canvas("p1","加",2);
word_2_canvas("p1","台",3);
canvas_fill_word("淆",1);
canvas_fill_word("加",2);
canvas_fill_word("台",3);