当前位置：首页 > VUE

vue实现文字手写

2026-01-19 15:13:44VUE

实现文字手写效果的方法

使用Vue实现文字手写效果可以通过CSS动画或JavaScript库来模拟手写过程。以下是几种常见方法：

使用CSS动画实现

通过@keyframes和clip-path属性逐帧显示文字：

<template>
  <div class="handwritten-text">{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: "Hello World"
    }
  }
}
</script>

<style>
.handwritten-text {
  font-family: 'Dancing Script', cursive;
  animation: write 3s steps(30) forwards;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}

@keyframes write {
  to {
    width: 100%;
  }
}
</style>

使用TypeIt.js库

TypeIt是一个轻量级的打字动画库，可以模拟手写效果：

<template>
  <div ref="typeItElement"></div>
</template>

<script>
import TypeIt from 'typeit';

export default {
  mounted() {
    new TypeIt(this.$refs.typeItElement, {
      strings: "This text will appear as if handwritten",
      speed: 100,
      lifeLike: true
    }).go();
  }
}
</script>

使用Canvas绘制

通过Canvas API逐笔绘制文字：

<template>
  <canvas ref="canvas" width="500" height="100"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const text = "Handwritten Effect";
    let i = 0;

    ctx.font = "30px 'Dancing Script', cursive";

    const interval = setInterval(() => {
      ctx.fillText(text.substring(0, i), 10, 50);
      i++;
      if (i > text.length) clearInterval(interval);
    }, 100);
  }
}
</script>

使用SVG动画

通过SVG的stroke-dasharray属性创建描边动画：

<template>
  <svg viewBox="0 0 500 100">
    <path ref="path" d="M10,50 C10,50 100,10 200,50 S300,90 400,50" 
          fill="none" stroke="black" stroke-width="2"/>
    <text font-family="'Dancing Script', cursive" font-size="30">
      <textPath xlink:href="#path" startOffset="0%">
        {{ animatedText }}
      </textPath>
    </text>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      fullText: "Handwritten SVG Text",
      animatedText: ""
    }
  },
  mounted() {
    let i = 0;
    const timer = setInterval(() => {
      this.animatedText = this.fullText.substring(0, i);
      i++;
      if (i > this.fullText.length) clearInterval(timer);
    }, 100);
  }
}
</script>