计算 HTML5 视频的偏移量答案

【问题标题】：Calculating offset for HTML5 video计算 HTML5 视频的偏移量
【发布时间】：2014-04-08 07:59:36
【问题描述】：

我正在使用画布覆盖跟踪 HTML5 视频中的一个点。画布位于视频标签的顶部，具有以下样式：

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

这些点是通过单独的 (Android) 应用程序捕获的。这是我在画布上绘制点的方法：

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"]);
}

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

提前致谢。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

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

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

和

#my-canvas {~~width: 100%; height: 100%;~~position:absolute...

请注意，虽然更改画布大小也会清除它，因此如果需要，您必须重新绘制所有内容。

【讨论】：

谢谢。我不确定我是否跟随。可能是我表达的不够清楚，对此我深表歉意。我的代码的问题是，如果视频处于横向模式，我在画布上绘制的点是同步的。如果它是纵向的，它就会关闭。