Vue怎么在视频上绘制不规则图形

Question

最近接触到了智能化,需要在视频上绘制一些规则,其中就包括各种图形来形成智能化的规则?请问用Vue的什么组件,怎么实现呢?

Answer 1

在 Vue 中绘制不规则图形可以使用 HTML5 canvas 元素。

首先，在 Vue 组件的模板中添加 canvas 元素：

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

然后，在 Vue 组件的 mounted 钩子函数中，获取 canvas 元素的 2D 绘图上下文，并使用 beginPath()、moveTo()、lineTo() 和 fill() 等方法绘制不规则图形：

mounted() {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')

  ctx.beginPath()
  ctx.moveTo(10, 10)
  ctx.lineTo(50, 50)
  ctx.lineTo(90, 10)
  ctx.fill()
}

有关使用 HTML5 canvas 在 Vue 中绘制不规则图形的更多信息，可以参考 HTML5 canvas 官方文档：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial 。