js实现web汉字笔画教学

主要技术：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); //笔画的顺序，第一笔为0
          console.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>