计算HTML5视频的偏移量

时间:2014-04-08 07:59:36

标签: javascript html5 canvas

我正在使用画布覆盖在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"]);
}

此代码适用于横向视频,但不适用于纵向。我可能会错过偏移计算的东西。如果你能指出我正确的方向,我将不胜感激。

提前致谢。

1 个答案:

答案 0 :(得分:0)

使用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 ...

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