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


Posted in HTML / CSS onMay 03, 2016

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

用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) { //只支持一个汉字   
  18.             alert("亲,少输入点字好吧,我吃不消呢~");   
  19.             return;   
  20.         }   
  21.     
  22.         var reg = /[\u4E00-\u9FA5]/g;//用正则表达式判断是否为汉字   
  23.         if (!reg.test(tex)) {   
  24.             alert("亲,输入一个汉字好吧,其他的我不认识呢~");   
  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();//第一次加载是输出"顶"   
  53. });    

以上这篇字中字效果的实现【html5实例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

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

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
html5需遵循的6个设计原则
Apr 27 #HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 #HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 #HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 #HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 #HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 #HTML / CSS
基于html5绘制圆形多角图案
Apr 21 #HTML / CSS
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
几个学习PHP的网址
2006/11/25 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php导出生成word的方法
2015/12/25 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Python assert关键字原理及实例解析
2019/12/13 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
传媒专业推荐信范文
2013/11/23 职场文书
企业节能减排实施方案
2014/03/19 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
暑假打工感想
2015/08/07 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL