字中字效果的实现【html5实例】

        ctx.font = "bolder 40px 宋体";   
        ctx.textBaseline = ‘top’;   
        ctx.fillText(tex, 20, 20);   
    
        var panel = $("#panel");//汉字输出区域   
        panel.html("");//清空历史汉字   
    
        for (y = 1; y < 40; y++) {   
            for (x = 1; x < 40; x++) {   
                imageData = ctx.getImageData(20 + x, 20 + y, 1, 1);//获取灰度像素值   
                if (imageData.data[0] >180 ) {    //0为黑，255为白，取180是为了调控精度，确保不同浏览器都能有良好效果   
                    panel.html(panel.html() + blankStr);   
                } else {   
                    panel.html(panel.html() + tex);   
                }   
            }   
            panel.html(panel.html() + "<br>");   
        }   
    });   
    
    $("button#bt").click();//第一次加载是输出"顶"   
});    

以上这篇字中字效果的实现【html5实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

原文地址：http://www.cnblogs.com/shouce/archive/2016/05/03/5453737.html