字中字效果-html5实例

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

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

核心代码:

        var canvas;var ctx;var tex;var blankStr = "  ";//输出空白$(function () {$("button#bt").click(function () {//绑定按钮单击事件if ($("canvas#myCanvas").length > 0) {canvas = $("canvas#myCanvas")[0];ctx = canvas.getContext("2d");}var tex = $("input#inpt").val();//获取输入框文字if (!tex) tex = "顶";//默认文字为"顶"if (tex.length > 1) { //只支持一个汉字alert("亲,少输入点字好吧,我吃不消呢~");return;}var reg = /[\u4E00-\u9FA5]/g;//用正则表达式判断是否为汉字if (!reg.test(tex)) {alert("亲,输入一个汉字好吧,其他的我不认识呢~");return;}ctx.fillStyle = "rgba(0,0,0,1)";//绘制底色ctx.fillRect(20, 20, 40, 40);
	        ctx.fillStyle = "rgba(255,255,255,1)"//绘制文字ctx.font = "bolder 40px 宋体";ctx.textBaseline = 'top';ctx.fillText(tex, 20, 20);var panel = $("#panel");//汉字输出区域panel.html("");//清空历史汉字for (y = 1; y < 40; y++) {for (x = 1; x < 40; x++) {imageData = ctx.getImageData(20 + x, 20 + y, 1, 1);//获取灰度像素值if (imageData.data[0] >180 ) {    //0为黑,255为白,取180是为了调控精度,确保不同浏览器都能有良好效果panel.html(panel.html() + blankStr);} else {panel.html(panel.html() + tex);}}panel.html(panel.html() + "<br>");}});$("button#bt").click();//第一次加载是输出"顶"});

  查看实例:http://jialiren.sinaapp.com/

转载于:https://www.cnblogs.com/acjialiren/archive/2011/07/29/2121095.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

shiro整合mybatis数据库

使用shiro实现用户拦截和登录验证之后&#xff0c;整合mybatis数据库 1、导入依赖 <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><!-- https://mvnreposito…

力扣09-回文数

第一种解法&#xff0c;是将整数转换为字符串&#xff0c;排除x<0这种必不为回文数的情况&#xff0c;和x0这种必为回文数的情况&#xff0c;x>0的情况以字符串中间位置为界&#xff0c;循环判断两侧字符是否相等。 import java.util.Scanner;public class Palindrome9 …

mac svn 设置代理

mac SVN 设置代理打开终端vim ~/.subversion/severs在[global]节点修改如下http-proxy-host 127.0.0.1http-proxy-port 8080注意&#xff0c;前面不能有空格&#xff0c;符号的前后也不能有空格。

linux中查看进程

进程是一个其中运行着一个或多个线程的地址空间和这些线程所需要的系统资源。一般来说&#xff0c;Linux系统会在进程之间共享程序代码和系统函数库&#xff0c;所以在任何时刻内存中都只有代码的一份拷贝。 1&#xff0c;ps命令 作用&#xff1a;ps命令主要用于查看系统中进程…

LeetCode450题—— 删除二叉搜索树中的节点

首先需要认识什么是二叉搜索树&#xff0c;可以进入百度词条https://baike.baidu.com/item/%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91/7077855?fraladdin 一定要注意题目要求算法时间复杂度是O(h)。 递归方法&#xff1a; /*** Definition for a binary tree node.* …

会员按天统计、日分时统计

会员表&#xff1a;tbl_member /regtime注册日期 按天统计&#xff1a; 存储过程&#xff1a; create proc sp_tjmembertype intas DECLARE BDATE datetimeDECLARE EDATE datetimeSET EDATEconvert(varchar,getdate(),23)if type1 begin SET BDATEconvert(varchar(7)…

leetCode —— 1200.最小绝对差

class Solution {public List<List<Integer>> minimumAbsDifference(int[] arr) {//由小到大排序Arrays.sort(arr);int min arr[1]-arr[0];//注意这个最小值的选取for (int i 1; i < arr.length; i) {if (min > arr[i] - arr[i - 1] ){min arr[i] - arr[i…

ubuntu系统设置开机自启动

创建启动脚本 vi /etc/init.d/mystart #!/bin/bash /etc/init.d/glusterd start mount /dev/sdb1 /mnt/gluster ********************************************************* chmod 777 /etc/init.d/mystart ln -s /etc/init.d/mystart /etc/rc5.d/S99mystart apt-get install…

SQL Server 开发指南(经典教程)

SQL Server 开发指南http://www.blogjava.net/hoojo/archive/2011/07/21/354788.html

LeetCode——1721.交换链表中的节点

方法一&#xff1a;好理解&#xff0c;但是需要遍历三次链表 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) …

技术沙龙之液晶监视器和显示器

大家好&#xff01;前些天我的一个医疗信息化的同事问我一个问题&#xff0c;如何在安装系统中识别监视器和显示器&#xff1f;当时就出了一头的汗&#xff0c;我的个天什么意思啊&#xff1f; 搞了半天这哥们想知道两者的区别。还好以前做过UC和视频会议的工作对这些多少有些了…

LeetCode——866.回文素数

分析&#xff0c;这个题目本身不难&#xff0c;用数学方法很容易解出来&#xff0c;问题是当给的数据过大时&#xff0c;容易超时。 数学法&#xff1a;遍历所有数字&#xff0c;检查是不是回文串。如果是&#xff0c;检查是不是素数&#xff0c;如果当前数字长度为 8&#xff…

oracle 日志 LogMiner

http://hi.baidu.com/jinlijun_998/blog/item/be2ce10afeb92035b0351d7f.html -------------------------------------------------- Oracle日志查看一&#xff0e;Oracle日志的路径&#xff1a;登录&#xff1a;sqlplus "/as sysdba"查看路径&#xff1a;SQL> se…

Cannot resolve jakarta.validation:jakarta.validation-api:2.0.2

在SpringCloud中引入Eureka依赖时报错 Cannot resolve jakarta.validation:jakarta.validation-api:2.0.2 在maven里面只要引入了Eureka的地方全部报红线 后面看见引入Eureka包pom报红这篇博文说&#xff0c;在maven仓库里面我添加的依赖已经过时了。去官网看&#xff0c;也确…

分享Silverlight/WPF/Windows Phone一周学习导读(8月15日-8月19日)

分享Silverlight/WPF/Windows Phone一周学习导读(8月15日-8月19日) 本周Silverlight学习资源更新&#xff1a; Silverlight Tools 4安装时的错误提示 happy_0812 Silverlight带关闭动画的内容控件&#xff0c;可移动的内容控件&#xff08;二&#xff09; 豆豆狗 未安装Silverl…

IDEA访问数据库时,某一个字段数据库中有值但是访问到的数据始终是null

问题描述 Request请求之后&#xff0c;页面返回了数据&#xff0c;其他字段都对&#xff0c;就那一个字段是null 排除问题 能访问到其他数据&#xff0c;说明IDEA连接数据库时成功了的&#xff0c;那不是数据库的问题就是字段本身的问题 存在的问题 字段类型&#xff0c;检…

知识库如何跟其他业务系统结合

很多企业在建立自己的知识库之前就有了很多业务系统&#xff0c;知识库建好以后&#xff0c;却不知道该如何跟自己的业务系统相结合。KMaster提供了几点知识库跟业务系统相结合的经验&#xff0c;供大家参考。 1. web插件的形式。 在业务系统中引用知识库提供的js文件&am…

LeetCode——350. 两个数组的交集 II

题目描述&#xff1a; 给定两个数组&#xff0c;编写一个函数来计算它们的交集。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2,2]示例 2: 输入&#xff1a;nums1 [4,9,5], nums2 [9,4,9,8,4] 输出&#xff1a;[4,9]说明&#x…

第八章 基本脚本编译

key words : 执行多个命令的方法 、 创建与执行脚本、反引号 、数学计算8.1 执行多个命令的方法:1、在每个命令间用;隔开[rootlocalhost ~]# date;who2011年 05月 29日 星期日 08:44:32 EDTroot :0 2011-05-29 08:32root pts/0 2011-05-29 08:33 (:0.…

LeetCode——面试题 08.01. 三步问题

题目描述&#xff1a; 三步问题。有个小孩正在上楼梯&#xff0c;楼梯有n阶台阶&#xff0c;小孩一次可以上1阶、2阶或3阶。 实现一种方法&#xff0c;计算小孩有多少种上楼梯的方式。 结果可能很大&#xff0c;你需要对结果模1000000007。示例1:输入&#xff1a;n 3 输出&am…