Fatal编程技术网
  • javascript/
  • Javascript 当画布尺寸事先未知时，无法在画布上的正确位置绘制

Javascript 当画布尺寸事先未知时，无法在画布上的正确位置绘制

javascript html css html5-canvas

Javascript 当画布尺寸事先未知时，无法在画布上的正确位置绘制,javascript,html,css,html5-canvas,html5-video,Javascript,Html,Css,Html5 Canvas,Html5 Video,我们需要在视频元素上使用鼠标进行绘制。我正在用画布渲染这幅画。当我们事先不知道视频的宽度和高度时，我无法在正确的位置画线。它是在不同的位置绘制的。下面是代码 HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/css/main.css" /> </head> <body> <h1>Realtime communicatio

我们需要在视频元素上使用鼠标进行绘制。我正在用画布渲染这幅画。当我们事先不知道视频的宽度和高度时，我无法在正确的位置画线。它是在不同的位置绘制的。下面是代码

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="/css/main.css" />
</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

  <canvas id="localCanvas"></canvas>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/main.js"></script>

</body>
</html>
main.js

body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}

canvas {
  position: absolute;
}

'use strict';
var localVideo = document.querySelector('#localVideo');

navigator.mediaDevices.getUserMedia({
  audio: false,
  video: true
})
.then(gotStream)
.catch(function(e) {
  alert('getUserMedia() error: ' + e.name);
});

function gotStream(stream) {
  // Checking Whether video is ready to set canvas width and height
  var b = setInterval(() => {
    if(localVideo.readyState >= 3){
          document.getElementById('localCanvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
          document.getElementById('localCanvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";
          clearInterval(b);
        }
    },500);

  localVideo.srcObject = stream;
}

document.addEventListener("DOMContentLoaded", function(){
  let xPos = window.scrollX + document.querySelector('#localVideo').getBoundingClientRect().left;
  let yPos = window.scrollY + document.querySelector('#localVideo').getBoundingClientRect().top;

  document.getElementById('localCanvas').style.left = xPos + "px";
  document.getElementById('localCanvas').style.top = yPos + "px";

  document.getElementById('localCanvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
  document.getElementById('localCanvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";

  InitThis();
});

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
    ctx = document.getElementById('localCanvas').getContext("2d");
    const canvas = document.querySelector('#localCanvas');

    $('#localCanvas').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, false);
    });

    $('#localCanvas').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true);
        }
    });

    $('#localCanvas').mouseup(function (e) {
        mousePressed = false;
    });
        $('#localCanvas').mouseleave(function (e) {
        mousePressed = false;
    });
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 9;
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x; lastY = y;
}
这里我们只是在CSS中设置max width和width属性，我们事先不知道高度。因此，当onload事件侦听器运行时，我将基于localVideo设置画布的宽度和高度坐标。但到那时，视频的高度是160像素。但当加载视频时，高度将更改为240像素。同样，当视频状态准备好在gotStream（）中播放时，我正在更改画布的宽度和高度，如下所示

一旦视频准备好播放，画布大小与本地视频的大小完全相同。但是当我尝试在画布上使用鼠标绘制时，它被绘制在错误的位置，特别是当我尝试在画布的下半部分或右边缘绘制时。谁能帮我解决这个问题

更新：我在onload事件中将画布的高度硬编码为“240px”，这也不起作用。

画布正在拉伸，因为宽度和高度被设置为样式而不是原始属性。通过以下代码修复了该问题

document.getElementById('localCanvas').setAttribute("width", document.querySelector('#localVideo').offsetWidth;
document.getElementById('localCanvas').setAttribute("height", document.querySelector('#localVideo').offsetHeight;

document.getElementById('localCanvas').setAttribute("width", document.querySelector('#localVideo').offsetWidth;
document.getElementById('localCanvas').setAttribute("height", document.querySelector('#localVideo').offsetHeight;