zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    分布式集群环境下运行Wordcount程序
    VM搭建hadoop分布式集群
    安装运行Hadoop
    网络问题
    Golang依赖工具
    会话进程组终端 · 守护进程
    Golang笔记
    [转]GDB
    [转]用户态与内核态
    【转】linux环境内存分配原理 malloc info
  • 原文地址:https://www.cnblogs.com/luozhangshuai/p/7737864.html
Copyright © 2011-2022 走看看