JS实现在线汉字笔画练习特效（平板移动端可用）

代码原因公司之前接了个项目，帮助6-8岁孩童练习手写汉字，这次有空把代码整理分析一下

实现了手写，ai自动写，高亮其中笔画等等，需要可以再修改一下源码哈

首先index页面代码如下：

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>汉字练习</title><link rel="stylesheet" href="styles.css" /><script src="polyfill.min.js"></script></head>
<body><h1 class="title">书写汉字</h1><form class="js-char-form char-form"><label>字符<input type="text" class="js-char char-input" size="1" maxlength="1" value="我" /></label><button type="submit">发布</button>
</form>
<div class="actions"><button class="js-toggle">展示/隐藏手写高亮文字</button><button class="js-toggle-hint">展示/隐藏灰暗文字阴影</button><button class="js-animate">文字自动手写动画展示</button><button class="js-quiz">自己手写方法</button>
</div><div id="target"></div><script type="application/javascript" src="hanzi-writer.min.js"></script>
<script type="application/javascript" src="test.js"></script></body>
</html>

修饰器css

body, html {background: #f4f0ea;margin: 0;padding: 0;text-align: center;font-family: 'Raleway', sans-serif;font-size: 14px;
}
body {padding-bottom: 80px;
}
* {box-sizing: border-box;
}input, button {outline: none;
}
button, #target, .title {box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}button, #target {text-shadow: 0 1px 1px white;
}.title {color: white;background: linear-gradient(to bottom, #333, #222);padding: 15px 0;margin: 0 0 30px;text-shadow: 0 0 15px #4B89DB;
}#target {background: white;clear: both;border: 1px solid black;width: 400px;height: 400px;margin: 0 auto;
}.char-form {margin: 0 0 20px;
}.char-form button {padding: 8px 5px;line-height: 14px;display: inline-block;vertical-align: top;
}.char-input {font-size: 16px;padding: 5px;width: 133px;text-align: center;
}.actions {width: 400px;margin: 0 auto;
}.actions button {display: block;width: 97px;float: left;margin-right: 4px;margin-bottom: 4px;
}
.actions button:last-child {margin-right: 0;
}button {background: none;border: 1px solid #444;color: #444;cursor: pointer;transition: all 300ms;
}button:hover {color: #1e6cd2;border: 1px solid #1e6cd2;box-shadow: none;
}

操作的test.js

var writer;
var isCharVisible;
var isOutlineVisible;function printStrokePoints(data) {var pointStrs = data.drawnPath.points.map(point => `{x: ${point.x}, y: ${point.y}}`);console.log(`[${pointStrs.join(', ')}]`);
}function updateCharacter() {document.querySelector('#target').innerHTML = '';var character = document.querySelector('.js-char').value;window.location.hash = character;writer = HanziWriter.create('target', character, {width: 400,height: 400,radicalColor: '#166E16',onCorrectStroke: printStrokePoints,onMistake: printStrokePoints,});isCharVisible = true;isOutlineVisible = true;window.writer = writer;
}window.onload = function() {var char = decodeURIComponent(window.location.hash.slice(1));if (char) {document.querySelector('.js-char').value = char;}updateCharacter();document.querySelector('.js-char-form').addEventListener('submit', function(evt) {evt.preventDefault();updateCharacter();});document.querySelector('.js-toggle').addEventListener('click', function() {isCharVisible ? writer.hideCharacter() : writer.showCharacter();isCharVisible = !isCharVisible;});document.querySelector('.js-toggle-hint').addEventListener('click', function() {isOutlineVisible ? writer.hideOutline() : writer.showOutline();isOutlineVisible = !isOutlineVisible;});document.querySelector('.js-animate').addEventListener('click', function() {writer.animateCharacter();});document.querySelector('.js-quiz').addEventListener('click', function() {writer.quiz({showOutline: true});});
}

然后再引入公共的polyfill.min.js和hanzi-writer.min.js即可

效果如下：

案例代码下载

JS实现在线汉字笔画练习特效（平板移动端可用）相关推荐

js实现web汉字笔画教学
主要技术:hanzi-writer 以Vue为示例 <template><div class="hello"><button @click=" ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
gbk编码在线转换工具_TOOLFK工具-在线汉字/字母/人民币/简繁体转换工具
本文要推荐的[TOOLFK]在线汉字/字母/人民币/简繁体转换工具,提供简繁体在线转换.人民币大写转换.字母大小写互转.汉字转拼音在线日常使用工具. 網站名稱:ToolFk 網站鏈結:https:// ...
html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字. 查看演示下载资源: 14 次下载资源下载积分: 20 积分 js代码 const le ...
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
本文实例讲述了JS实现获取汉字首字母拼音.全拼音及混拼音的方法.分享给大家供大家参考,具体如下: 这里需要用到一个js获取汉字拼音的插件,可点击此处本站下载. 运行效果如下: 完整示例代码: ? 1 ...
html excel 在线编辑,利用js实现在线编辑excel表格代码
特效描述:利用js实现在线编辑 excel 表格代码.利用js实现在线编辑excel表格代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function load(){ x ...
TOOLFK工具-在线汉字/字母/人民币/简繁体转换工具
本文要推荐的[TOOLFK]在线汉字/字母/人民币/简繁体转换工具,提供简繁体在线转换.人民币大写转换.字母大小写互转.汉字转拼音在线日常使用工具. 網站名稱:ToolFk 網站鏈結:https:// ...
java电影票选座_jQuery仿猫眼电影票在线选座购买特效
特效描述:电影票选座在线选座购买特效. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码屏幕电影:天将雄师时间:03月20日 22:15 座位: 票数:0 总价:￥0 var ...
php js统计链接点击次数,JS实现在线统计一个页面内鼠标点击次数的方法
本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: js记录鼠标的点击次数 function addCookie(name,cookievalue,t ...

JS实现在线汉字笔画练习特效（平板移动端可用）

JS实现在线汉字笔画练习特效（平板移动端可用）相关推荐

最新文章

热门文章