Question

onload创建2个图形并显示它们。它们都在onclick="draw1()"所在的地方起作用，但是当我将它们更改为onload时，只有最后一个图形与onload一起起作用

我的第一张图

<script>

    window.onload = function draw1() {
                var n = "114,19,20,21,22,23,24";
                var values = n.split(',');
                var canvas = document.getElementById('myCanvas1');
                var ctx = canvas.getContext('2d');
                var width = 26; //bar width
                var X = 60 // 60; // first bar position 
                var base = canvas.height;
                var skipint = 0;

                for (var i =0; i<values.length; i++) {
                    skipint ++;

                    var h = values[i];
                    var pers = h * (base / 100);
                    ctx.fillRect(X,canvas.height - pers,width,pers);

                }

                    ctx.fillStyle = '#050505';
                    ctx.font="22px bold Arial";
                    ctx.fillText('  0 %',0,canvas.height);
                    ctx.fillText(' 50 %',0,canvas.height /2 + 11);
                    ctx.fillText('100 %',0,canvas.height - canvas.height + 22);
            }
        </script>

我的第一个画布：

<canvas id="myCanvas1">     
</canvas>

我的第二张图

<script>
    window.onload = function draw2() {

        var n = "22,22,23,24";
        var values = n.split(',');
        //get the myCanvas2 byID
        var canvas = document.getElementById('myCanvas2');
        var ctx = canvas.getContext('2d');
        var width = 26; //bar width
        var X = 60 // 60; // first bar position 
        var base = canvas.height;
        var skipint = 0;
        //skips evry 3 bars
        for (var i =0; i<values.length; i++) {
            skipint ++;

            var h = values[i];
            var pers = h * (base / 100);
            ctx.fillRect(X,canvas.height - pers,width,pers);

        }

            ctx.fillStyle = '#050505';
            ctx.font="22px bold Arial";
            ctx.fillText('  0 %',0,canvas.height);
            ctx.fillText(' 50 %',0,canvas.height /2 + 11);
            ctx.fillText('100 %',0,canvas.height - canvas.height + 22);
    }

</script>

我的第二张画布

<canvas id="myCanvas2">
</canvas>

问题：

如何使两个图表都可以与window.onload一起使用？

Answer 1

您可以声明每个函数，然后创建一个函数来同时调用它们。我认为，如果在事件处理程序之外声明函数，然后使用onload处理程序调用它们，则调试起来会更容易。

<script>
  function draw1() {
    var n = "114,19,20,21,22,23,24";
    var values = n.split(',');
    var canvas = document.getElementById('myCanvas1');
    var ctx = canvas.getContext('2d');
    var width = 26; //bar width
    var X = 60 // 60; // first bar position 
    var base = canvas.height;
    var skipint = 0;

    for (var i = 0; i < values.length; i++) {
      skipint++;

      var h = values[i];
      var pers = h * (base / 100);
      ctx.fillRect(X, canvas.height - pers, width, pers);

    }

    ctx.fillStyle = '#050505';
    ctx.font = "22px bold Arial";
    ctx.fillText('  0 %', 0, canvas.height);
    ctx.fillText(' 50 %', 0, canvas.height / 2 + 11);
    ctx.fillText('100 %', 0, canvas.height - canvas.height + 22);
  }
</script>
<p>My first canvas</p>

<canvas id="myCanvas1">     
</canvas>


<script>
  function draw2() {

    var n = "22,22,23,24";
    var values = n.split(',');
    //get the myCanvas2 byID
    var canvas = document.getElementById('myCanvas2');
    var ctx = canvas.getContext('2d');
    var width = 26; //bar width
    var X = 60 // 60; // first bar position 
    var base = canvas.height;
    var skipint = 0;
    //skips evry 3 bars
    for (var i = 0; i < values.length; i++) {
      skipint++;

      var h = values[i];
      var pers = h * (base / 100);
      ctx.fillRect(X, canvas.height - pers, width, pers);

    }

    ctx.fillStyle = '#050505';
    ctx.font = "22px bold Arial";
    ctx.fillText('  0 %', 0, canvas.height);
    ctx.fillText(' 50 %', 0, canvas.height / 2 + 11);
    ctx.fillText('100 %', 0, canvas.height - canvas.height + 22);
  }
</script>

<p>My second canvas</p>

<canvas id="myCanvas2">
</canvas>

<script>
  window.onload = function() {
    draw1();
    draw2();
  }
</script>

JS windows.onload不起作用

1 个答案: