計算HTML5視頻的偏移量

Question

我正在使用畫布覆蓋跟蹤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"]);
}

此代碼在橫向視頻中效果很好，但在縱向視頻中效果不佳。 偏移量計算可能會丟失一些內容。 如果您能指出正確的方向，我們將不勝感激。

提前致謝。

Answer 1

當您使用CSS設置畫布大小時，您的畫布實際上始終為300x150像素。 您所吸引的是相對於該尺寸的。

嘗試從CSS規則中刪除100％的寬度和高度，並在每次遇到onresize事件等時為其位圖設置畫布大小。CSS設置元素大小； 這將設置位圖大小（如果沒有CSS被覆蓋，則元素將跟隨）：

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

和

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

請注意，盡管更改畫布大小也會清除它，所以如果需要，您將必須重新繪制所有內容。