Javascript 为什么我的多画布动画（requestAnimationFrame）仅适用于一个元素？

我不明白为什么我的代码中requestAnimationFrame只对一个元素起作用。我想动画两个边界。。。代码笔中的我的代码->

10
85
停止动画
动画边框（“#myCanvas”，“动画值”）；
动画边框（“#myCanvas2”，“动画2的值”）；
///////////////////////////////////////////////////////////////////////////////////////////////
函数animatedBorders（选择器、选择器值）{
canvas=document.querySelector（选择器）；
ctx=canvas.getContext（'2d'）；
...
////////////////////
drawRect（）；
ID=requestAnimationFrame（animationLoop）；
drawText（）；
////////////////////
函数drawRect（）{
...
}
函数drawLine（）{
...
}
函数drawText（）{
...
}
函数animationLoop（）{
抽绳（）；
}
}

您忘记使用

var ctx

忽略此项，创建了window.ctx变量，第二次运行函数时，第一个ctx被第二个ctx重写，这就是为什么只有第二个ctx运行

这是animatedBorders函数的前3行的外观：

function animatedBorders(selector, selectorValue) {
  canvas = document.querySelector(selector);
  var ctx = canvas.getContext('2d');

唯一值得注意的变化是，在

ctx

function animatedBorders(selector, selectorValue) {
  canvas = document.querySelector(selector);
  var ctx = canvas.getContext('2d');