vue3 canvas.getContext is not a function

最新推荐文章于 2023-02-24 14:25:00 发布

原创最新推荐文章于 2023-02-24 14:25:00 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

文章介绍了在Vue组件中如何利用ref属性来获取<canvas>元素，并通过watch监听确保元素加载完成后，使用getContext(2d)方法绘制图形，例如fillRect函数填充矩形。

//使用 ref获取 
<canvas style="background-color: #996;" ref="canvas1"></canvas>

<script setup>
import {  ref,watch } from 'vue';
//使用ref获取 dom
let canvas1 = ref(null)

//因为script 的速度 比标签要快 所以要监听这个canvas1 不然获取不到
watch(canvas1, (newValue, oldValue) => {
//这里必须使用.value  这个是ref的规则  也就是这个导致的 not a function
  let context = canvas1.value.getContext("2d");
  context.fillRect(50,50,100,50)
});