javascript - 与桌面相比，JS Canvas 上的矩形在移动设备上的位置不同

Question

我正在开发一个网络应用程序，使用用户的网络摄像头或相机进行人脸检测。围绕检测到的脸部绘制的矩形在移动设备上无法正确对齐。我已对矩形的坐标应用缩放来处理不同的窗口大小。它在桌面浏览器上运行没有任何问题。

// videoX is the number of pixels on the x-axis of the video stream
var scaleX = canvas.width/videoX;
var scaleY = canvas.height/videoY;
// predictions is an array containing the coordinates of the corners of the rectangles to be drawn around the detected faces
ctx.rect(
      scaleX*predictions.topLeft[0],
      scaleY*predictions.topLeft[1],
      scaleX*(predictions.bottomRight[0] - predictions.topLeft[0]),
      scaleY*(predictions.bottomRight[1] - predictions.topLeft[1])

在纵向模式下， Canvas 的宽度太大，无法完全适应屏幕。 在横向模式下它确实适合并且问题不再存在。 我可以做什么来解决这个问题？非常感谢您的帮助。

Answer 1

您应该使用 JS 设置 Canvas 的宽度和高度，而不是使用 CSS。最初和窗口大小调整时。否则你的 Canvas 会缩放并且绘图也会缩放/错位:

Html canvas behaves strangely

调整大小后，应重新绘制 Canvas 的内容:

Add image as the background of an canvas