有没有办法用Typescript和Vue Javascript在画布上画一条简单的线或一个点?

sbdsn5lh  于 2023-02-10  发布在  TypeScript
关注(0)|答案(1)|浏览(179)

我是相当新的VueJS和Typescript。我可以用香草Javascript画一条简单的线,但正在寻找一种简单的方法,我可以画一个圆或线或点在VueJS页面上时,页面加载它应该画。我发现库,但他们有一个画板绘图,但我想要的是画那些当页面加载时,获得画布ID是在页面上。有人知道我怎么才能做到吗?

rdlzhqv9

rdlzhqv91#

这与vue的template reflifecycle hook有关
下面是一个简单的画线示例。当然,您也可以使用其他库(例如fcanvaspixil.js),正如您顺便提到的:

<template>
  <canvas ref="canvasRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"

const canvasRef = ref<HTMLCanvasElement>()
onMounted(() => {
  const ctx = canvasRef.value.getContext('2d')
      
  ctx.beginPath()
  ctx.moveTo(0, 0)
  ctx.lineTo(100, 100)
  ctx.stroke()
})
</script>

演示:
x一个一个一个一个x一个一个二个x

相关问题