我们在使用cavas画布的过程中,有时候需要修改他的宽高,但是如果通过css样式去修改,有个弊端,就是显示内容比较模糊,为此需要让他的宽高自适应父元素宽高。
canvas的默认宽高为300px*150px,在css中设置canvas的宽高,实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。
如何让其自适应父元素宽高:
<template>
<div id="vehicleVideo">
<canvas id="vehicleCanvas"> </canvas>
</div>
</template>
<script setup>
import {onMounted} from "vue"
onMounted(()=> {
let video = document.getElementById("vehicleVideo");
let canvas = document.getElementById("vehicleCanvas");
canvas.width = video.offsetWidth;
canvas.height = video.offsetHeight;
})
</script>