字中字效果的实现

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

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

核心代码：

1. varcanvas;
2. varctx;
3. vartex;
4. varblankStr=""; //输出空白
6. $(function(){
8. $("button#bt").click(function(){ //绑定按钮单击事件
10. if($("canvas#myCanvas").length> 0){
11. canvas=$("canvas#myCanvas")[0];
12. ctx=canvas.getContext("2d");
13. }
15. vartex=$("input#inpt").val(); //获取输入框文字
16. if(!tex)tex="顶"; //默认文字为"顶"
17. if(tex.length> 1){ //只支持一个汉字
18. alert("亲，少输入点字好吧，我吃不消呢~");
19. return;
20. }
22. varreg=/[/u4E00-/u9FA5]/g; //用正则表达式判断是否为汉字
23. if(!reg.test(tex)){
24. alert("亲，输入一个汉字好吧，其他的我不认识呢~");
25. return;
26. }
28. ctx.fillStyle="rgba(0,0,0,1)"; //绘制底色
29. ctx.fillRect(20,20,40,40);
30. ?
31. ctx.fillStyle="rgba(255,255,255,1)"//绘制文字
32. ctx.font="bolder40px宋体";
33. ctx.textBaseline='top';
34. ctx.fillText(tex,20,20);
36. varpanel=$("#panel"); //汉字输出区域
37. panel.html(""); //清空历史汉字
39. for(y=1; y

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！