HTML5 canvas API 是否可以在不向 DOM 添加元素的情况下工作？答案

【问题标题】：Does HTML5 canvas API work without adding element to DOM?HTML5 canvas API 是否可以在不向 DOM 添加元素的情况下工作？
【发布时间】：2018-01-16 06:57:07
【问题描述】：

我正在将 HTML5 视频元素的帧绘制到这样的画布上：

const wrapperElement = document.getElementById('wrapper')
const videoElement = document.getElementById('video')
  
videoElement.onloadeddata = function () {
  const width = videoElement.videoWidth
  const height = videoElement.videoHeight

  const canvasElement = document.createElement('canvas')  
  canvasElement.width = width
  canvasElement.height = height

  wrapperElement.appendChild(canvasElement) // is this necessary?

  const ctx = canvasElement.getContext('2d')
  ctx.drawImage(videoElement, 0, 0, width, height)

  const imageData = ctx.getImageData(0, 0, width, height) // what I need!
  
  // doing something with imageData
}

<div id="wrapper">
  <video id="video" loop autoplay muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <br />
</div>

我只需要画布来获取原始图像数据，因为视频元素 API 不提供像 getImageData 这样的方法。因此，我不希望画布在我的页面上可见。我知道我可以通过将其设为display: none 来实现这一点，但我想知道它是否必须存在于 DOM 中。仅仅通过 JavaScript 创建画布然后使用它的 API 还不够吗？它似乎在 Chrome 63 中对我有用。不过我很犹豫，因为任何使用这种模式的教程也总是在 DOM 中插入画布。

【问题讨论】：

不，你不需要附加画布。

标签： javascript html canvas

【解决方案1】：

我犹豫了，因为任何使用这种模式的教程也总是在 DOM 中插入画布。

是的，您可以安全地使用画布，而无需将其插入 DOM 树中。 DOM 提供了一种实际显示画布内容的方法，但不需要处理其内容。

（Tuts 可能假设你真的想看看画布上发生了什么。）

【讨论】：