Java LED点阵字生成 点阵字体生成

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

确定

不想写解释，就是这么任性！

#wrap{    position: relative;    height: 200px;}#wrap span{    position: absolute;    width: 7px;    height: 7px;    border: 1px solid #000;}

<p id="wrap"></p><p>    <input type="text" id="text" value="哥">    <button onclick="draw()" id="btn">确定</button></p>

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();

本文是转载内容，我们尊重原作者对文章的权利。如有内容错误或侵权行为，请联系我们更正或删除文章。