字中字效果的实现【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 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python学生管理系统开发
2019/01/30 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
pytorch 求网络模型参数实例
2019/12/30 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
企业治理工作自我评价
2013/09/26 职场文书
单位在职证明书
2014/09/11 职场文书
城管个人总结
2015/02/28 职场文书
房贷工资证明范本
2015/06/12 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
Django drf请求模块源码解析
2021/06/08 Python
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL