仲恺企业网站建设网站地图在线生成器

仲恺企业网站建设,网站地图在线生成器,创意设计网,天堂网站官网#xff1a;Hanzi Writer 文档#xff1a;Hanzi Writer Hanzi Writer 是 javascript 免费开源库#xff0c;根据汉字书写时按照笔画顺序的特征#xff0c;可以播放正确笔画顺序的描边动画和练习测试。 支持简体字和繁体字。我基于这个库制作了汉字学习项目#xff1…官网Hanzi Writer文档Hanzi WriterHanzi Writer 是 javascript 免费开源库根据汉字书写时按照笔画顺序的特征可以播放正确笔画顺序的描边动画和练习测试。 支持简体字和繁体字。我基于这个库制作了汉字学习项目汉字学习:汉字学习 主要针对小学语文的汉字学习可以学习汉字的书写笔画拼音等。 - AtomGit | GitCode安装在 script 标签加载 Hanzi Writer最简单选项是直接从 jsdelivr CDN 加载 Hanzi Writer JS 。只需将以下内容放入你的网页的头部:script srchttps://cdn.jsdelivr.net/npm/hanzi-writer3.0/dist/hanzi-writer.min.js/script也可以拷贝一个下载 Hanzi Writer javascript 文件:hanzi-writer.min.js- 生产压缩版 (32 kb, 9kb 压缩后的)hanzi-writer.js- 开发未压缩版本 (72 kb)上面的脚本将在脚本加载后使全局HanziWriter变量可用。比如我在汉字学习这个软件里面index.html文件中这样用的!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小学生汉字学习练习软件/title link relstylesheet hrefstyle.css script srchttps://cdn.jsdelivr.net/npm/hanzi-writer3.5/dist/hanzi-writer.min.js/script /head body通过 npm 加载 Hanzi Writer如果你想在 webpack 或 node.js 中包含 Hanzi Writer你可以从npm install hanzi-writer安装。npm install hanzi-writer然后可以在你的代码中包含 Hanzi Writerconst HanziWriter require(hanzi-writer);基本使用在屏幕上渲染创建一个新的HanziWriter实例需要传入一个目标 div ID 或者 DOM 引用,你要渲染的汉字, 配置选项. 下面举例说明一个简单的例子。在 HTML 中声明以下内容:div idcharacter-target-div/div然后, 在 Javascript:var writer HanziWriter.create(character-target-div, 我, { width: 100, height: 100, padding: 5 });你能看到以下结果:在上面的示例中width和height是包含字符的框的大小以像素为单位padding是字符和框边缘之间的空格也以像素为单位 你也可以配置其他选项例如角色的颜色。下面是使用不同尺寸和颜色绘制的示例var writer HanziWriter.create(character-target-div, 爽, { width: 150, height: 150, padding: 20, strokeColor: #EE00FF // pink });Hanzi Writer 也支持给汉字的偏旁部首上设置不同的颜色。 你可以用radicalColor选项来设置来展示的部手颜色. 下面的以 草 字为例给偏旁部首添加绿色。var writer HanziWriter.create(character-target-div, 草, { width: 150, height: 150, padding: 5, radicalColor: #168F16 // green });动画当你创建了一个 Hanzi Writer 实例后你可以调用animateCharacter()方法来让它运动. 在下面的例子中, 点击按钮可以让汉字运动。这个 HTML 代码看起来是下面这个样子:div idcharacter-target-div/div button idanimate-button动画/buttonThen, the corresponding javascript:var writer HanziWriter.create(character-target-div, 国, { width: 100, height: 100, padding: 5, showOutline: true }); document.getElementById(animate-button).addEventListener(click, function() { writer.animateCharacter(); });实践在汉字学习这个项目中是这样使用的script.js文件代码createWriter(containerId, character, isPractice false) { const container document.getElementById(containerId); container.innerHTML ; // 清除之前的内容 const writerConfig { width: isPractice ? 200 : 150, height: isPractice ? 200 : 150, padding: isPractice ? 20 : 10, showOutline: true, strokeColor: #333333, radicalColor: #168F16 }; try { const writer HanziWriter.create(container, character, writerConfig); if (isPractice) { this.practiceWriter writer; } else { this.writer writer; } return writer; } catch (error) { console.warn(无法创建${character}的动画实例: ${error.message}); // 创建一个简单的占位符 container.innerHTML div classplaceholder-writer${character}/div; container.style.display flex; container.style.justifyContent center; container.style.alignItems center; container.style.fontSize isPractice ? 120px : 100px; container.style.color #333333; return null; } }