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%; position:absolute ...

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

计算HTML5视频的偏移量

1 个答案: