字中字效果的实现【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实现图片翻牌特效
Mar 10 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
Python Tkinter实现简易计算器功能
2018/01/30 Python
python用post访问restful服务接口的方法
2018/12/07 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
法学毕业生自荐信
2013/11/13 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
超市重阳节活动方案
2014/02/10 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
执行力心得体会范文
2016/01/11 职场文书
小学教代会开幕词
2016/03/04 职场文书
投资入股协议书
2016/03/22 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
Golang 并发编程 SingleFlight模式
2022/04/26 Golang