javascript - Javascript は最初の視覚化をスキップします

Question

2 つの異なるラベルの値を視覚化する 2 つのキャンバスがあります。私は2つのほぼ同じjavascriptを書き、アプリケーションを実行しました。最初のビジュアライゼーションをスキップして、2 番目のビジュアライゼーションのみを表示します。私の間違いはどこですか？

これが私のhtmlコードです:-

<div><canvas id="canvas" width="300" height="300"></canvas></div>
<asp:Label ID="LblGauge" runat="server"></asp:Label>

<div><canvas id="canvas2" width="300" height="300"></canvas></div>
<asp:Label ID="LblGauge1" runat="server"></asp:Label>

そして、ここに私の2つのJavaScriptがあります。現在の唯一の違いは、canvas/canvas2 と lblgauge および lblgauge1 です。2 番目のスクリプトですべての変数を変更しても、2 番目のビジュアライゼーションしか表示されません。

    <script>
    window.onload = function () {
        //canvas initialization
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //dimensions
        var W = canvas.width;
        var H = canvas.height;
        //Variables
        var degrees = document.getElementById("LblGauge").textContent;
        var new_degrees = 0;
        var difference = 0;
        var color = "lightgreen";
        var bgcolor = "#222";
        var text;
        var animation_loop, redraw_loop;

        function init() {
            //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, 100, 0, Math.PI * 2, false); 
            ctx.stroke();

            //Angle in radians = angle in degrees * PI / 180
            var radians = degrees * Math.PI / 180;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 30;
            //the arc will start from the topmost end
            ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
            ctx.stroke();

            //Lets add the text
            ctx.fillStyle = color;
            ctx.font = "50px bebas";
            text = Math.floor(degrees / 360 * 100) + "%";
            text_width = ctx.measureText(text).width;
            ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
        }

        function draw() {
            //Cancel any movement animation if a new chart is requested
            if (typeof animation_loop != undefined) clearInterval(animation_loop);
            ////time for each frame is 1sec / difference in degrees
            animation_loop = setInterval(animate_to, 1000 / difference);
        }

        //function to make the chart move to new degrees
        function animate_to() {
            if (degrees == new_degrees)

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;
            init();
        }
        draw();
    }
</script>

    <script>
    window.onload = function () {
        //canvas initialization
        var canvas = document.getElementById("canvas2");
        var ctx = canvas.getContext("2d");
        //dimensions
        var W = canvas.width;
        var H = canvas.height;
        //Variables
        var degrees = document.getElementById("LblGauge1").textContent;
        var new_degrees = 0;
        var difference = 0;
        var color = "lightgreen";
        var bgcolor = "#222";
        var text;
        var animation_loop, redraw_loop;

        function init() {
            //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, 100, 0, Math.PI * 2, false); 
            ctx.stroke();

            //Angle in radians = angle in degrees * PI / 180
            var radians = degrees * Math.PI / 180;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 30;
            //the arc will start from the topmost end
            ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
            ctx.stroke();

            //Lets add the text
            ctx.fillStyle = color;
            ctx.font = "50px bebas";
            text = Math.floor(degrees / 360 * 100) + "%";
            text_width = ctx.measureText(text).width;
            ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
        }

        function draw() {
            //Cancel any movement animation if a new chart is requested
            if (typeof animation_loop != undefined) clearInterval(animation_loop);
            ////time for each frame is 1sec / difference in degrees
            animation_loop = setInterval(animate_to, 1000 / difference);
        }

        //function to make the chart move to new degrees
        function animate_to() {
            if (degrees == new_degrees)

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;
            init();
        }
        draw();
    }
</script>

誰かが私のコードを変更する方法を教えてもらえますか?

これは、javascript が機能するときに表示されるものです。