我正在使用画布覆盖在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"]);
}
此代码适用于横向视频,但不适用于纵向。我可能会错过偏移计算的东西。如果你能指出我正确的方向,我将不胜感激。
提前致谢。
答案 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
...
请注意,虽然更改画布大小也会清除它,因此如果需要,您将不得不重绘所有内容。