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

Question

我不明白为什么我的代码中的requestAnimationFrame只适用于一个元素。我想这两个动画边框......我在codepen代码 - >http://codepen.io/zey_ser/pen/RPXovp

<div> 
    <div id="valueForAnimation" style="display:none;">10</div> 
    <canvas id="myCanvas" width="100" 
    height="100"></canvas> 
</div> 
<div> 
    <div id="valueForAnimation2" style="display:none;">85</div> 
    <canvas id="myCanvas2" width="100" 
    height="100"></canvas> 
</div> 
<button onclick="stop()">Stop animation</button> 

animatedBorders('#myCanvas','valueForAnimation'); 
animatedBorders('#myCanvas2','valueForAnimation2'); 
/////////////////////////////////////////////////////////////////////////////////////////////// 
function animatedBorders (selector,selectorValue){ 
canvas = document.querySelector(selector); 
ctx = canvas.getContext('2d'); 
... 
//////////////////// 
drawRect(); 
ID = requestAnimationFrame(animationLoop); 
drawText(); 
//////////////////// 
function drawRect(){ 
... 
} 
function drawLine(){ 
... 
} 
function drawText(){ 
... 
} 

function animationLoop(){ 
    drawLine(); 
} 
} 

Answer 1

你忘了通过omiting此使用var ctx创建window.ctx的变量，第二次你的函数运行的第一个CTX结束写在第二，这就是为什么只有第二个运行。

这是animatedBorders功能的前3行应该是什么样子：

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

，唯一的显着变化，加入varctx