我是相当新的VueJS和Typescript。我可以用香草Javascript画一条简单的线,但正在寻找一种简单的方法,我可以画一个圆或线或点在VueJS页面上时,页面加载它应该画。我发现库,但他们有一个画板绘图,但我想要的是画那些当页面加载时,获得画布ID是在页面上。有人知道我怎么才能做到吗?
rdlzhqv91#
这与vue的template ref和lifecycle hook有关下面是一个简单的画线示例。当然,您也可以使用其他库(例如fcanvas,pixil.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
1条答案
按热度按时间rdlzhqv91#
这与vue的template ref和lifecycle hook有关
下面是一个简单的画线示例。当然,您也可以使用其他库(例如fcanvas,pixil.js),正如您顺便提到的:
演示:
x一个一个一个一个x一个一个二个x