42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const point_array = useState<number[][] | undefined>('point_array', () => undefined)
|
|
|
|
const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
|
|
const context: Ref<CanvasRenderingContext2D | undefined> = ref();
|
|
|
|
const props = defineProps(['cw', 'ch'])
|
|
const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
|
|
|
|
const newDraw = async () => {
|
|
context.value = canvasElement.value?.getContext('2d') || undefined;
|
|
const lines = point_array.value
|
|
if (!lines) return;
|
|
|
|
context.value?.clearRect(0, 0, props.cw, props.ch)
|
|
await nextFrame()
|
|
|
|
for (let indexY = 0; indexY < lines.length; indexY++) {
|
|
const line = lines[indexY];
|
|
|
|
const drawLine = () => {
|
|
line.forEach((point, indexX) => {
|
|
if (canvasElement.value && context.value && point > 0) {
|
|
context.value.fillStyle = 'rgba(70, 0, 70, 0.5)'
|
|
context.value.fillRect(indexX, indexY, 1, 1)
|
|
}
|
|
})
|
|
}
|
|
drawLine()
|
|
if (indexY % 10 == 0) await nextFrame()
|
|
}
|
|
}
|
|
watch(point_array, (newStatus) => {
|
|
newDraw()
|
|
})
|
|
onMounted(() => {
|
|
newDraw()
|
|
})
|
|
</script>
|
|
<template>
|
|
<canvas :width="props.cw" :height="props.ch" ref="canvasElement" style="position: absolute; z-index: -1;"></canvas>
|
|
</template> |