Question

我不明白为什么我的代码中的requestAnimationFrame仅适用于一个元素。我想动画两个边框...我在codepen中的代码 - ＆gt; 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

你忘了使用var ctx省略了你创建了一个window.ctx的变量，第二次你的函数运行时第一个ctx被写了第二个，这就是为什么只有第二个运行。

这是animatedBorders函数的前3行应该是这样的：

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

只有明显的变化，var

之前添加了ctx

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

1 个答案: