js生成点阵字体

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js生成点阵字体相关的知识,希望对你有一定的参考价值。

 ------------------------------------先看效果------------------------------------------------

 
 
不想写说明,就是这么任性!
#wrap{
    position: relative;
    height: 200px;
}
#wrap span{
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
}


<
div id="wrap"></div> <div> <input type="text" id="text" value="哥"> <button onclick="draw()" id="btn">确定</button> </div>
var canvas = document.createElement(\'canvas\');
var ctx = canvas.getContext(\'2d\');
var cols = 16;
var rows = 16;
function lattice(txt){
    cols = txt.length * 16
    canvas.width = cols;
    canvas.height = rows;
    ctx.clearRect(0,0,cols,rows);
    ctx.font = "16px SimSun";
    ctx.fillStyle = "#000";
    ctx.fillText(txt, 0, 14);
    var data = ctx.getImageData(0, 0, cols, rows)
    var len = data.data.length;
    var res = \'\';
    for(var i = 1; i <= rows; i++){
        for(var j = 1; j <= cols; j++){
            var pos = (( i-1 )*cols+( j ))*4 -1;
            if(data.data[pos] > 0){
                res += `<span class="black" style="left: ${j*10}px;top: ${i*10}px"></span>`
            }
        }
    }
    wrap.innerhtml = res;
}
function draw(){
    var txt = text.value;
    if(txt){
        lattice(txt);
    }
}    
draw();

github:    https://github.com/luozhangshuai/lattice

 

以上是关于js生成点阵字体的主要内容,如果未能解决你的问题,请参考以下文章

Zebra指令

PHP 点阵5*7字体

点阵字体显示系列之二:汉字显示

第3版emWin教程第26章 字符编码和点阵字体基础知识(重要)

vscode代码片段生成vue模板

STM32H7教程第52章 STM32H7的LTDC应用之点阵字体和字符编码(重要)