开发环境:
Typescript+Vue3+fabric
效果
实现代码
<script lang="ts" setup>
import { onMounted } from "vue";
import { fabric } from "fabric";
const width = 10;// 横线宽度
const gap = 5;// 间隔
const blobs: any = [];
let canvas = new fabric.Canvas("anime");
let maxx = 500;
const top = 10;
onMounted(() => {
canvas = new fabric.Canvas("anime", {
renderOnAddRemove: false,
selection: false,
});
maxx = 300
let total = Math.ceil(maxx / (width + gap));
for (var i = 0; i < total; i++) {
const rect = new fabric.Rect({
width,
height: 5,
fill: "red",
top: 0,
left: i * (width + gap),
});
canvas.add(rect);
blobs[i] = rect;
}
canvas.renderAll();
anime();
});
function anime() {
blobs.forEach((v: any) => {
v.top = 0;
if (v.left < maxx - gap) {
v.left++;
}
if (v.left === maxx - gap) {
v.left = -width;
}
});
fabric.util.requestAnimFrame(anime);
canvas.renderAll();
}
</script>
<template>
<div class="canvas-box">
<canvas
id="anime"
width="400"
height="300"
style="border: 1px solid #ccc"
></canvas>
</div>
</template>
<style scoped>
</style>