主要技術：hanzi-writer

以Vue為示例

<template><div class="hello"><button @click="begin">開始</button><button @click="animateBtn">開啟動畫</button><button @click="loop">重復動畫</button><button @click="quiz">手寫</button><div id="box"></div></div> </template><script> import hanzi from "hanzi-writer"; export default {name: "HelloWorld",mounted() {);},data() {return {writer: "",};},methods: {begin() {this.writer = hanzi.create("box", "肖", {width: 100,height: 100,padding: 5,showCharacter: false, //不顯示漢字showOutline: false, //開啟動畫時，是否顯示字radicalColor: "#168F16", // 對偏旁部首著色strokeColor: "#000000", //全部著色 這里的顏色只能是16進制的，學英文不顯示字strokeAnimationSpeed: 5, // 5x normal speed 整個動畫的速度delayBetweenStrokes: 10, //每一筆之間動畫的間隔時間，數字越大，間隔時間越長onLoadCharDataSuccess: function (data) {//加載漢字成功的回調console.log("Success!");},onLoadCharDataError: function (reason) {// 加載漢字失敗的回調console.log("Oh No! Something went wrong :(");},})},animateBtn() {this.writer.animateCharacter({onComplete: function () {//動畫結束的回調console.log("動畫結束");},});},loop() {this.writer.loopCharacterAnimation();},quiz() {//開啟手寫，寫一筆，顯示一筆this.writer.quiz({//書寫錯誤回調onMistake: function (strokeData) {console.log(strokeData.strokeNum); //筆畫的順序，第一筆為0console.log(strokeData.mistakesOnStroke); //當前筆畫寫錯的次數console.log(strokeData.totalMistakes); //一共寫錯的次數console.log(strokeData.strokesRemaining); //這個漢字一共的筆畫},//書寫正確回調onCorrectStroke: function (strokeData) {},// 書寫完畢回調onComplete: function (summaryData) {console.log(summaryData.character); // 該漢子console.log(summaryData.totalMistakes); //一共錯誤的次數},});},}, }; </script><style scoped> #box {border: 1px solid #ccc;width: 100px;height: 100px; } </style>

總結

以上是生活随笔為你收集整理的js实现web汉字笔画教学的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。