p5.j​​s | 如何更改画布的大小？

Question

下面的代码想要实现以下目标：

1. 使用实时视频捕获创建 200x200 <video>
2. 制作该视频捕获的 200x200 <canvas>
3. 获取捕获的第一帧并将其作为 200x200 <img>附加到页面上。

    let video
    let canvasSize = 200
    let PAUSE_DRAW = false
    
    function setup() {
      createCanvas(canvasSize, canvasSize)
      video = createCapture(VIDEO)
      video.size(canvasSize, canvasSize)
    }
        
    async function draw() {
    
      if (video && video.loadedmetadata) {
    
        if (!PAUSE_DRAW) {
          // get a 200x200 from the center of the video and draw it on the canvas
          image(video.get(), 0, 0, canvasSize, canvasSize, x, y, canvasSize, canvasSize)
    
          let currentFrameAsBase64 = canvas.toDataURL()
          
          // append <img> with current frame as src
          document.getElementById('frame').src = currentFrameAsBase64
    
          PAUSE_DRAW = true
    
        }
      }
    }

这是我遇到的问题：

<canvas>实际尺寸仍然是 400x400。 只有我在其中绘制的图像是 200x200。 结果，当我获取画布的 base64 并将其附加为<img> ，img 也是 400x400。 但我希望<canvas>和<img>也是 200x200。

我该如何解决 ？

Answer 1

您没有提供您的 HTML 代码，这是必要的。 但如果我理解正确的话，视频不是画布的大小。
画布的大小必须在样式和属性中设置，所以这是不正确的：

<style>
  canvas {
    height: 400px;
    width: 400px;
  }
</style>
<canvas></canvas>

这是正确的：

<style>
  canvas {
    height: 400px;
    width: 400px;
  }
</style>
<canvas width="400px" height="400px"></canvas>

Answer 2

必须将 setup() 更改为：

function setup() {
  createCanvas(canvasSize, canvasSize)
  video = createCapture(VIDEO)
  video.size(canvasSize, canvasSize)
  video.elt.height = canvasSize
  video.elt.width = canvasSize
}