javascript - 计算 HTML5 视频的偏移量

Question

我正在使用 Canvas 叠加层追踪 HTML5 视频中的一个点。 Canvas 位于视频标签之上，样式如下:

#my-canvas { width: 100%; height: 100%; position:absolute !important; z-index:100000; margin: 0 auto; background-color:rgba(68, 170, 213, 0.0); }

这些点是通过单独的 (Android) 应用程序捕获的。以下是我如何在 Canvas 上绘制点:

MyClass.prototype.drawLine = function(_context, _ctr, _color) {
    _context.lineWidth      = 2;
    _context.lineJoin       = 'round';
    _context.strokeStyle    = _color;

    _context.moveTo(this.data["xs"][_ctr]*this.xOffset, this.data["ys"][_ctr]*this.yOffset);
    _context.lineTo(this.data["xs"][_ctr+1]*this.xOffset, this.data["ys"][_ctr+1]*this.yOffset);
    _context.stroke();
    _context.closePath();
}

我将数据点与偏移值相乘以补偿屏幕尺寸。这是我计算偏移量的方式:

MyClass.prototype.calculateOffsets = function() {
        this.yOffset        = this.video.offsetHeight/parseFloat(this.data["height"]);
        this.xOffset        = this.video.offsetWidth/parseFloat(this.data["width"]);
}

这段代码在横向视频中工作正常，但在纵向视频中却不行。我可能在偏移量计算中遗漏了一些东西。如果您能指出正确的方向，我将不胜感激。

提前致谢。

Answer 1

当您使用 CSS 设置 Canvas 大小时，您的 Canvas 实际上始终为 300x150 像素。您绘制的内容将与该大小相关。

尝试从 CSS 规则中移除 100% 宽度和高度，并在每次收到 onresize 事件时为其位图设置 Canvas 大小等。CSS 设置元素大小；这将设置位图大小(如果没有覆盖 CSS，元素将跟随):

_context.canvas.width = window.innerWidth;
_context.canvas.height = window.innerHeight;

和

#my-canvas { 宽度:100%；高度:100%； position:absolute...

请注意，更改 Canvas 大小也会将其清除，因此如果需要，您必须重新绘制到该点的所有内容。