用html5实现如图字中有字效果

实现思路：用画布输出文本，然后分析像素点，根据像素点输出文本。

核心代码：

JavaScript代码将内容复制到剪贴板

varcanvas

varctx

vartex

varblankStr=//输出空白

$(function(){

$ ('button # bt ')。click (function () {//bind按钮单击事件

if($(' canvas # my canvas '). length 0){

canvas=$(' canvas # Mycanvas ')[0]；

CTX=canvas . GetContext(' 2d ')；

}

vartex=$('input#inpt ')。val()；//获取输入框文本

if(！tex)tex=' top '；//默认文本为“top”

If(tex.length1){//只支持一个汉字

警惕('亲爱的，请少打字，我受不了~ ')；

返回；

}

var reg=/[/u4e 00-/u9 fa 5]/g；//用正则表达式判断是否是汉字

if(！reg.test(tex)){

警惕('亲爱的，输入一个汉字，其他的我不知道~ ')；

返回；

}

ctx.fillStyle='rgba(0，0，0，1)'；//绘制背景颜色

ctx.fillRect(20，20，40，40)；

？

Ctx.fillstyle=' rgba (255，255，255，1)'//绘制文本

Ctx.font=' bolder40px Tahoma

ctx.textBaseline=' top

ctx.fillText(tex，20，20)；

var panel=$(' # panel ')；//汉字输出区

panel . html(')；//清除历史汉字

for(y=1；y40y ){

for(x=1；x40x ){

imageData=ctx.getImageData(20 x，20 y，1，1)；//获取灰度像素值

如果(imageData.data[0]180){//0为黑色，255为白色，用180来控制精度，保证不同浏览器可以有很好的效果

panel . html(panel . html)(BlackStr)；

}else{

panel . html(panel . html)(tex)；

}

}

panel . html(panel . html()' br ')；

}

});

$('button#bt ')。click()；//个负载是输出‘top’

});