我们需要在视频元素上使用鼠标进行绘制。我正在使用 Canvas 来渲染绘图。当我们事先不知道视频的宽度和高度时，我无法在正确的位置画线。它被绘制在不同的位置。下面是代码。
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.css
body {
font-family: sans-serif;
}
video {
max-width: 100%;
width: 320px;
}
canvas {
position: absolute;
}
main.js
'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中设置最大宽度和宽度属性，我们事先并不知道高度。因此，当 onload 事件监听器函数时，我根据 localVideo 设置 Canvas 的宽度和高度坐标。但那时视频高度是 160 px。但是当视频加载时，高度会更改为 240 px。因此，当视频状态准备好播放时，我将更改 Canvas 的宽度和高度，如下所示在 gotStream() 中。
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);
视频准备好播放后， Canvas 大小与本地视频的大小完全相同。但是当我尝试在 Canvas 上使用鼠标绘制时，它被绘制在不正确的位置，特别是当我尝试在 Canvas 的下半部分或右边缘绘制时。谁能帮我解决这个问题。
更新:我在 onload 事件中将 Canvas 的高度硬编码为“240px”，但这也不起作用。
最佳答案
Canvas 正在被拉伸(stretch)，因为宽度和高度被设置为样式而不是原始属性。通过以下代码修复了问题。
document.getElementById('localCanvas').setAttribute("width", document.querySelector('#localVideo').offsetWidth;
document.getElementById('localCanvas').setAttribute("height", document.querySelector('#localVideo').offsetHeight;
关于javascript - 当事先不知道 Canvas 尺寸时，无法在 Canvas 上的正确位置绘图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61443883/