如何用动画使用javascript绘制多个画布元素？

Question

我拿了一个样本来绘制来自codeplayer.com的动画测量图，并试图创建一个通用的javascript，我们可以使用这个通用的javascript在同一页上创建多个这样的测量图。我创建了一个示例代码，但所有的画布测量图都是在一个地方创建的。我发现它与setInterval动画有关，但我无法理解如何解决它。

更新回答：

通过将的getContext（）为画布内_init（）函数以分别指向每个帆布固定的问题。

更新小提琴出现在http://jsfiddle.net/QsMVn/4/

在的情况下，这是行不通的，这里是更新后的代码：

HTML：

<div id="A" style="border: 2px solid yellow"></div> 

<div id="B" style="border: 2px solid red"></div> 

<div id="C" style="border: 2px solid green"></div> 

<div id="D" style="border: 2px solid white"></div> 

的JavaScript：

var gaugeConfig = { "canvasHolderId": "A", "width": "300", "height": "300", "circleColor": "#222", "arcColor": "#00ff00", "canvasFillColor": "#333", "textPosition": "inside" } 
     var gaugeConfig1 = { "canvasHolderId": "B", "width": "400", "height": "400", "circleColor": "#acacac", "arcColor": "#0000ff", "canvasFillColor": "#333", "textPosition": "inside" } 
     var gaugeConfig2 = { "canvasHolderId": "C", "width": "500", "height": "500", "circleColor": "#444", "arcColor": "#ff0000", "canvasFillColor": "#333", "textPosition": "inside" } 
     var gaugeConfig3 = { "canvasHolderId": "D", "width": "600", "height": "600", "circleColor": "#ccc", "arcColor": "#000000", "canvasFillColor": "#333", "textPosition": "inside" } 

     function drawGauge(gc) { 

      var W = gc.width; 
      var H = gc.height; 
      var degrees = 0; 
      var new_degrees = 0; 
      var difference = 0; 
      var color = gc.arcColor; 
      var bgcolor = gc.circleColor; 
      var text; 
      var animation_loop, redraw_loop; 
      var me = this; 
      var canvasHolder = document.getElementById(gc.canvasHolderId); 
      var canvasCreator = document.createElement("canvas"); 

      canvasCreator.id = _randomId(); 
      canvasCreator.width = gc.width; 
      canvasCreator.height = gc.height; 
      canvasHolder.appendChild(canvasCreator); 
      var canvas = document.getElementById(canvasCreator.id); 


      function _randomId() { 
       var d = new Date(); 
       return "canvas" + d.getFullYear() + "" + d.getMonth() + "" + d.getDay() + "" + d.getHours() + "" + d.getSeconds() + "" + d.getMilliseconds()*Math.random(); 
      } 

      function _init() { 

       // alert(canvasCreator.id) 

       ctx = canvas.getContext("2d"); 
       //Clear the canvas everytime a chart is drawn 
       ctx.clearRect(0, 0, W, H); 

       //Background 360 degree arc 
       ctx.beginPath(); 
       ctx.strokeStyle = bgcolor; 
       ctx.lineWidth = 30; 
       ctx.arc(W/2, H/2, W/3, 0, Math.PI * 2, false); //you can see the arc now 
       ctx.stroke(); 

       //gauge will be a simple arc 
       //Angle in radians = angle in degrees * PI/180 
       var radians = degrees * Math.PI/180; 
       ctx.beginPath(); 
       ctx.strokeStyle = color; 
       ctx.lineWidth = 30; 
       //The arc starts from the rightmost end. If we deduct 90 degrees from the angles 
       //the arc will start from the topmost end 
       ctx.arc(W/2, H/2, W/3, 0 - 90 * Math.PI/180, radians - 90 * Math.PI/180, false); 
       //you can see the arc now 
       ctx.stroke(); 

       //Lets add the text 
       ctx.fillStyle = color; 
       ctx.font = "50px bebas"; 
       text = Math.floor(degrees/360 * 100) + "%"; 
       //Lets center the text 
       //deducting half of text width from position x 
       text_width = ctx.measureText(text).width; 
       //adding manual value to position y since the height of the text cannot 
       //be measured easily. There are hacks but we will keep it manual for now. 
       ctx.fillText(text, W/2 - text_width/2, H/2 + 15); 
      } 

      function _animate_to() { 
       //clear animation loop if degrees reaches to new_degrees 
       if (degrees == new_degrees) 
        clearInterval(animation_loop); 

       if (degrees < new_degrees) 
        degrees++; 
       else 
        degrees--; 

       _init(); 
      } 

      function _draw() { 

       if (typeof animation_loop != undefined) clearInterval(animation_loop); 

       new_degrees = Math.round(Math.random() * 360); 
       difference = new_degrees - degrees; 

       //time for each frame is 1sec/difference in degrees 
       animation_loop = setInterval(function() { _animate_to() }, 1000/difference); 

      } 

      _draw(); 
      redraw_loop = setInterval(function() { _draw(); }, 2000); //Draw a new chart every 2 seconds 
     } 



     new drawGauge(gaugeConfig); 
     new drawGauge(gaugeConfig1); 
     new drawGauge(gaugeConfig2); 
     new drawGauge(gaugeConfig3); 

Answer 1

_init（）中的ctx始终指向同一画布。

您需要在_init（）中更改ctx以指向4个不同画布上下文中的每一个，然后为每个上下文绘制适当的标尺。