canvas ctx.stroke（）无法正常工作/显示（Javascript、Chrome）

我有一个画布上的网络摄像头流和摄像头有问题显示在顶部的矩形。网络摄像头流工作正常。 问题是矩形没有出现，有时，矩形会快速闪烁（而且也很模糊…）

网络摄像头至画布设置：

const canvas = document.querySelector('.photo');
const ctx = canvas.getContext('2d');

// gets the video stream from the user's webcam
function getVideo() {
 navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(localMediaStream => {
  video.src = window.URL.createObjectURL(localMediaStream);
  video.play();
}).catch(err => {
  console.error('oh no', err);
});
}

// Applies the webcam stream to a canvas
function paintToCanvas() {
 const width = video.videoWidth;
 const height = video.videoHeight;
 canvas.width = width;
 canvas.height = height;

 return setInterval(() => {
  ctx.drawImage(video, 0, 0, width, height);
 }, 16);
}

在顶部绘制矩形：

 function drawRectangle() {
  ctx.rect(150, 150, 50, 30);
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#FF0000';
  ctx.stroke();
 }
 drawRectangle();

我尝试了不同的笔划、线宽和面积，但结果相同。

---

我做错了什么？为什么它有时会在页面加载时来回闪烁而不停留？

您需要使用requestAnimationFrame而不是setInterval

这样，当浏览器更新其视口时，图形将发生变化

---

您需要使用requestAnimationFrame而不是setInterval

这样，当浏览器更新其视口时，图形将发生变化

---

下面是我为修复它而添加的内容：

  let startTime;
  const interval=1;

  requestAnimationFrame(animate);

  function animate(t){
   requestAnimationFrame(animate);
   if(!startTime){startTime=t;}
   if(t-startTime<interval){return;}
   startTime=t;
   drawRectangle();
  }

让我们开始计时；
常数间隔=1；
请求动画帧（动画）；
函数动画（t）{
请求动画帧（动画）；
如果（！startTime）{startTime=t；}
如果（t-startTime，我添加了以下内容来修复它：

  let startTime;
  const interval=1;

  requestAnimationFrame(animate);

  function animate(t){
   requestAnimationFrame(animate);
   if(!startTime){startTime=t;}
   if(t-startTime<interval){return;}
   startTime=t;
   drawRectangle();
  }

让我们开始计时；
常数间隔=1；
请求动画帧（动画）；
函数动画（t）{
请求动画帧（动画）；
如果（！startTime）{startTime=t；}
如果（t-startti我想你Tschallacka，链接帮助我找到修复。当答案对你有效时，你可以单击复选标记，向未来的访问者表明这是对你有效的答案。谢谢你Tschallacka，链接帮助我找到修复。当答案对你有效时，你可以单击复选标记，向未来的访问者表明这是正确的对你有用的答案。