字中字实际效果的完成【html5案例】

日期：2020-12-11 类型：科技新闻 

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

用html5完成如图字中有字实际效果

完成思路：用canvas輸出文本，随后剖析像素点，依据像素点輸出文本。

关键编码：

JavaScript Code拷贝內容到剪贴板
  1. var canvas;   
  2. var ctx;   
  3. var tex;   
  4. var blankStr = "  ";//輸出空白   
  5.     
  6. $(function () {   
  7.     
  8.     $("button#bt").click(function () {//关联按钮点击恶性事件   
  9.     
  10.         if ($("canvas#myCanvas").length > 0) {   
  11.             canvas = $("canvas#myCanvas")[0];   
  12.             ctx = canvas.getContext("2d");   
  13.         }   
  14.     
  15.         var tex = $("input#inpt").val();//获得键入框文本   
  16.         if (!tex) tex = "顶";//默认设置文本为"顶"   
  17.         if (tex.length > 1) { //只适用1个中国汉字   
  18.             alert("亲，少键入点字好吧，我吃未消呢~");   
  19.             return;   
  20.         }   
  21.     
  22.         var reg = /[\u4E00-\u9FA5]/g;//用正则表达式表述式分辨是不是为中国汉字   
  23.         if (!reg.test(tex)) {   
  24.             alert("亲，键入1个中国汉字好吧，别的的我不了解呢~");   
  25.             return;   
  26.         }   
  27.     
  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 = "bolder 40px 宋体";   
  33.         ctx.textBaseline = 'top';   
  34.         ctx.fillText(tex, 20, 20);   
  35.     
  36.         var panel = $("#panel");//中国汉字輸出地区   
  37.         panel.html("");//清空历史时间中国汉字   
  38.     
  39.         for (y = 1; y < 40; y++) {   
  40.             for (x = 1; x < 40; x++) {   
  41.                 imageData = ctx.getImageData(20 + x, 20 + y, 1, 1);//获得灰度值像素值   
  42.                 if (imageData.data[0] >180 ) {    //0为黑，255为白，取180是以便调控精度，保证不一样访问器都能有优良实际效果   
  43.                     panel.html(panel.html() + blankStr);   
  44.                 } else {   
  45.                     panel.html(panel.html() + tex);   
  46.                 }   
  47.             }   
  48.             panel.html(panel.html() + "<br>");   
  49.         }   
  50.     });   
  51.     
  52.     $("button#bt").click();//第1次载入是輸出"顶"   
  53. });    

以上这篇字中字实际效果的完成【html5案例】便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

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

上一篇：小N营销建站之家 返回下一篇：html5跨域通信之postMessage的用法总结