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

我从thedeplayer.com上取了一个样本，用动画绘制了仪表图，并试图创建一个通用的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);