Javascript HTML5视频：画布镜像慢

我的功能运行得很好，但经过几次循环后，速度变慢了，“镜像”视频有点结巴

有没有办法让它更快/更平滑

我想了解我是否选择了正确的方式镜像视频

我有css中的剪辑路径，它们必须是3，我在上面镜像了视频。首先看起来很好，但经过几次循环后，镜像视频运行缓慢，速度缓慢

请帮忙

document.addEventListener（'DOMContentLoaded'，function（）{
var v=document.getElementById（'video1'）；
var canvasBottom=document.getElementById（'mycanvasbottom'）；
var canvasleet=document.getElementById（'MyCanvasleet'）；
var canvasRight=document.getElementById（'mycanvasright'）；
var contextB=canvasboottom.getContext（'2d'）；
var contextL=canvasleet.getContext（'2d'）；
var contextR=canvasRight.getContext（'2d'）；
var-cw=640；
var-ch=480；
canvasBottom.width=cw；
canvasBottom.height=ch；
canvasleet.width=cw；
canvasleet.height=ch；
canvasRight.width=cw；
canvasRight.height=ch
v、 addEventListener（'timeupdate'，函数（）{
绘制（this，contextL，cw，ch）；
绘制（this，contextR，cw，ch）；
绘制（此、上下文B、cw、ch）；
}，假）；
}，假）；
功能图（v、c、w、h）{
如果（暂停| |结束）返回false；
c、 绘图图像（v，0，0，w，h）；
设置超时（绘图，20，v，c，w，h）；
}

#我的画布底部{
位置：绝对位置；
保证金：0自动；
排名：0；
底部：0；
左：0；
右：0；
宽度：75%；
身高：75%；
-webkit过滤器：灰度（1）；
剪辑路径：多边形（0 100%，50%50%，100%100%）；
}
#我的画布左{
位置：绝对位置；
保证金：0自动；
排名：0；
底部：0；
左：0；
右：0；
宽度：75%；
身高：75%；
-webkit过滤器：灰度（1）；
剪辑路径：多边形（0,50%50,0,100%）；
}
#我的画布对吗{
位置：绝对位置；
保证金：0自动；
排名：0；
底部：0；
左：0；
右：0；
宽度：75%；
身高：75%；
-webkit过滤器：灰度（1）；
剪辑路径：多边形（100%0，50%50%，100%100%）；
}
#视频1{
位置：绝对位置；
左：0；
}

首先，“timeupdate”事件被触发多次，所以实际上您调用draw的次数比您想要的要多得多。这就是它开始滞后的原因——每秒执行许多操作。您可能会听到“播放”和“暂停”事件（在执行play（）和pause（）方法后触发；“播放”事件在视频开始时也会被调用，因此您不必手动调用它，它无论如何都会被触发）。然后可以手动处理图形循环。这应该可以解决你的问题（我能够复制，它修复了减速效果）

此外，以下是您可以考虑的一些提示：

不要对动画使用setTimeout（），尤其是在玩画布时。阅读Window。RevestMyTrimeFrand（），这更好，并且考虑使用它。

<> LI>您可以考虑该代码中的许多优化，例如在代码中生成画布元素（去掉IDS），使用Objist.Apple（）向同一行中的对象添加多个属性，引入循环。该代码的数量将大幅减少。这不是必须的，但是保持代码质量总是好的。简单地说，未来的工作更少 问候你，祝你度过愉快的一天

编辑： 别误会，有些只是个人喜好。在大量使用js之后，我喜欢保持它的简单性，就像在这段代码中一样。享受免费代码

让lastAnimationFrameRequestId=0；
document.addEventListener（'DOMContentLoaded'，函数（）{
常数cw=640；
常数ch=480；
const video=document.getElementById（'video1'）；
常量画布=[]；
常数clippath=[
'剪辑路径：多边形（0 100%，50%50%，100%100%），
'剪辑路径：多边形（0,50%50,0 100%）；'，
'剪辑路径：多边形（100%0，50%50%，100%100%）'
];
clipPath.forEach（（clipPath）=>{
const canvas=Object.assign（document.createElement（'canvas'），{className:'my canvas'，style:clipPath，width:cw，height:ch}）；
画布。推（画布）；
document.body.appendChild（画布）；
});
video.addEventListener（'play'，（）=>window.requestAnimationFrame（（）=>draw（视频，画布））；
video.addEventListener（'pause'，（）=>window.cancelAnimationFrame（lastAnimationFrameRequestId））；
});
功能图（视频、画布）{
画布。forEach（（画布）=>{
canvas.getContext（'2d'）.drawImage（视频，0，0，canvas.width，canvas.height）；
});
lastAnimationFrameRequestId=window.requestAnimationFrame（（）=>draw（视频、画布））；
}

.my canvas{
位置：绝对位置；
保证金：0自动；
排名：0；
底部：0；
左：0；
右：0；
宽度：75%；
身高：75%；
-webkit过滤器：灰度（1）；
}

非常感谢您提供了这一详细且解释清楚的答案。我真的很感激。如果没有你，在一百万年内实现它是不可能的！你知道如何在画布左右添加模糊效果吗？剪辑路径：多边形（100%0，50%50%，100%100%）；过滤器：模糊（4px）；像这样的？在使用JS时，似乎有点像shapeGood的老朋友是console.log（）-它通常是我调试JS最有用的工具。简单，总是有效的。尝试将CSS、属性-webkit过滤器从“-webkit过滤器：灰度（1）；“更改为“-webkit过滤器：灰度（1）模糊（4px）；”。您可以混合使用多个过滤器，只需将它们用空格分隔即可。还可能需要添加“-moz filter”和“filter”以实现浏览器兼容性。您能帮我做些其他事情吗？如果我有另一个视频，我想用另一个视频复制画布呢？如果不复制代码，它会工作吗？不要复制代码！如果需要重用某些部件，请将其提取到函数中