 <head><script src="./src/chwriter.js"></script>//这里你可以下载原js然后本地引用，或者直接联网引用远程js<!-- <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@1.3/dist/hanzi-writer.min.js"></script> --></head><body>输入汉字进行练习：<input type="text" id="inputstr"/><button onclick="hwanimate()">动画</button><!-- 不通过网格 --><div id="character-target-div"></div><!-- //通过svm画方格 --><svg width="300" height="300" style="border: 1px solid rgb(221,221,221);" id="grid-background-target"><line x1="0" y1="0" x2="300" y2="300" stroke="#DDD" /><line x1="300" y1="0" x2="0" y2="300" stroke="#DDD" /><line x1="150" y1="0" x2="150" y2="300" stroke="#DDD" /><line x1="0" y1="150" x2="300" y2="150" stroke="#DDD" /></svg></body>

     <script>var inputstr = "一";//第一个默认值var options =  {width: 300,height: 300,padding: 5,showOutline:true,//是否显示底部阴影strokeAnimationSpeed:11 , //笔画速度 越小越慢delayBetweenStrokes:2,//笔画之间延迟 radicalColor: '#168F16', // 偏旁颜色showCharacter: false,//默认显示实体还是阴影delayBetweenLoops:100,//两次动画之间的时间 对loopCharacterAnimation 生效showHintAfterMisses:2,//手写错误次数后提示 false 禁用 highlightOnComplete:false,//书写完成后闪烁};//初始化输入let hw =  HanziWriter.create('grid-background-target', inputstr, options);function hwanimate() {inputstr = document.getElementById("inputstr").value;if(inputstr && inputstr.trim().length>0) {hw.setCharacter(inputstr.substr(0,1).trim());inputstr = inputstr.substring(1)}// hw.animateCharacter();//单次//多次重复// hw.loopCharacterAnimation();hwtest()};hwtest()/** 开启手写模式  测试笔画顺序*/function hwtest() {//showHintAfterMisses:1,手写错误次数后提示 false 禁用//hw.quiz();//回调函数 var phw = new Promise((res, rej)=>{hw.quiz({onMistake: function(strokeData) { },//错误 onCorrectStroke: function(strokeData) { },//正确 onComplete: function(summaryData) {//未完成 let arrays = ["三", "川", "土", "丰", "十", "士","田","干","千","二", "生", "日", "曰", "口"]let nextch = "";if(inputstr.length>0) {nextch = inputstr.substr(0,1);inputstr = inputstr.substring(1); } else { nextch = arrays[Math.floor(Math.random() * arrays.length)];}res(nextch);}});})phw.then((data)=>{hw.setCharacter(data);hwtest()}, ()=>{console.log(22)});/*其他方法writer.setCharacter(newCharacter) 加载新角色并重新渲染。writer.showCharacter() 显示字符（如果当前已隐藏）writer.hideCharacter() 隐藏当前显示的字符writer.showOutline() 显示角色轮廓（如果当前已隐藏）writer.hideOutline() 隐藏角色轮廓（如果当前已显示）writer.updateColor(colorName, newValue) 更改任何颜色选项的值。例如：writer.updateColor('strokeColor', '#AA12CD')writer.cancelQuiz() 立即取消当前正在运行的测验*/}  </script>

演示

参看源码，以及网络请求发现还是通过网络获取的数据，于是想到一个问题，我们可以能否把，所有数据获取到呢？【结果显然是可以直接获取的】，这样的话我们就可以部署到本地了,不用基于网络获取别人的数据了

var VERSION = '2.0';
var getCharDataUrl = function getCharDataUrl(char) {return 'https://cdn.jsdelivr.net/npm/hanzi-writer-data@' + VERSION + '/' + char + '.json';
};
...

说明：基于网络获取每一个汉字的笔画等数据。

下面是部署到本地后的展示

下面是纯html的展示
不用说我估计还是有人会说你这个还是基于网络的，那么我们可以通过一次定义js的方式吧数据转为json格式加载【最好用程序生成手动修改较为复杂】

从图中可以看到，‘三’，‘丁’，‘七’都是不请求网络的

感谢
@weixin_43372097提出的问题
问题：本地直接访问html报错

可以看出这里是跨域出现了一点问题，那么我们在服务器添加允许跨域即可。

 res.setHeader('Access-Control-Allow-Origin','*');

更新代码即可

分享3：hanzi-writer（演示汉字笔画顺序的 JS 库）相关推荐

Hanzi Weiter的简单应用小案例,在HTML汉字的书写,演示汉字笔画顺序的汉字笔画库 js vue案例实例
因为业务需求,上网查询之后写的一个小 demo,参考文档https://hanziwriter.org/ ** 具体实现 ** 在 script 标签加载 Hanzi Writer 只需将以下内容放入 ...
java 汉字字典，获取汉字拼音，拼音首字母，五笔，笔画，笔画顺序
最新的可以下载的包(原来写的丢失了,重新写了个): http://download.csdn.net/detail/wssiqi/6394057 如果地址不可访问,查看我的资源,看还在不.~~~ 环境 ...
汉字笔画教学控件开发-需求
一.功能清单 [列出该模块的功能清单,并指出各自的重要程度.] 编号功能(类)名称功能描述重要程度 1 绘制汉字路径绘制汉字笔画路径 A 2 顺序显示汉字笔画按汉字的笔画顺序一笔一笔显示汉字 ...
如何快速计算汉字笔画数
今天跟大家分享一下如何快速计算汉字笔画数 1.首先我们将要计算笔画的汉字复制到Excel中. 2.然后选中单元格区域 3.点击diy工具箱(Excel工具箱,百度即可了解详细下载安装信息,本文这里就不 ...
【叶子函数分享四十二】得到汉字笔画函数
--=============================================== --功能:汉字笔画函数 --说明:以单个汉字汉字为参数返回每一个汉字的笔画数 --作者: J9988 ...
在线笔画顺序查询工具
汉字笔顺查询系统,可在线查询汉字的笔画顺序,包括笔顺动画以及笔顺分步演示等,帮助您更规范的书写汉字,跟着动画学习汉字的正确笔顺.部首和笔画. 代码 <view class="a-hea ...
[日期工具分享][Shell]为特定命令依次传入顺序日期执行
[日期工具分享][Shell]为特定命令依次传入顺序日期执行使用方式: <本脚本文件名(必要时需要全路径)> <要执行的命令所在的文件名> <开始日期> < ...
24个笔画顺序表_小学一年级语文26个汉语拼音字母要点+田字格儿歌，赶紧给孩子看...
1 26个汉语拼音字母要点汉语拼音字母表-声母表汉语中每个音节起始处的辅音可以构成声母.汉语拼音方案<声母表>规定的声母符号一共有23个. b [玻] p [坡] m [摸] f [佛 ...
巧用Excel笔画排序，实现计算汉字笔画数
点赞再看,养成习惯:皮之不存,毛将焉附. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...

分享3：hanzi-writer（演示汉字笔画顺序的 JS 库）

文章灵感来自https://chanind.github.io/hanzi-writer/

分享3：hanzi-writer（演示汉字笔画顺序的 JS 库）相关推荐

最新文章

热门文章