javascript - 如何使用javascript绘制带有动画的多个 Canvas 元素？

Question

我从 thecodeplayer.com 上拿了一个样本来绘制带动画的仪表图，并试图创建一个通用的 javascript，我们可以使用它在同一页面上创建多个这样的仪表图。我创建了一个示例代码，但 Canvas 的所有仪表图都是在一个地方一个接一个地创建的。我发现它与 setInterval 动画有关，但我无法理解如何修复它。

更新的答案:

通过将 Canvas 的 getContext() 放在 _init() 函数中以分别指向每个 Canvas 来解决问题。

更新的 fiddle 出现在 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 总是指向同一个 Canvas 。

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