Javascript Chart.js在iPad上的性能问题

Javascript Chart.js在iPad上的性能问题,javascript,html5-canvas,chart.js,chart.js2,Javascript,Html5 Canvas,Chart.js,Chart.js2,我用chart.js和canvas创建了一个小游戏。然而,我只有一个画布来创建整个游戏,所以我也想在画布上画一些图像。 正因为如此,这款游戏在windows和android手机上都表现出色,但我在iPad上面临性能问题。谁能帮我完成我的任务,只保留一张画布 我已经在下面的笔中重新创建了场景 var _ctx = document.getElementById('myChart').getContext("2d") var canvas = document.createElem

我用chart.js和canvas创建了一个小游戏。然而,我只有一个画布来创建整个游戏,所以我也想在画布上画一些图像。 正因为如此,这款游戏在windows和android手机上都表现出色,但我在iPad上面临性能问题。谁能帮我完成我的任务,只保留一张画布

我已经在下面的笔中重新创建了场景

    var _ctx = document.getElementById('myChart').getContext("2d")
    var canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height =200;
    var bg = new Image();
    bg.src = 'https://img.freepik.com/free-vector/vibrant-pink-watercolor-painting-background_53876-58930.jpg?size=626&ext=jpg';
    var ctx = canvas.getContext('2d')
    var graphImage;
    var mainData = [],
      points = [],
      x = 0,
      y = 0,
      config,
      currentMax = 20,
      slope = 1;
    config = {
      "data": {
        "datasets": [{
          "type": "line",
          "data": mainData,
          "backgroundColor": "#ff0000",
          "borderColor": "#ff0000",
          "fill": false,
          "lineTension": 1,
          "borderWidth": 1,
          "pointRadius": 0
        }]
      },
      "options": {
        "legend": {
          "display": false
        },
        "animation": {
          "duration": 0
        },
        "responsive": false,
        "maintainAspectRatio": false,
        "scales": {
          "xAxes": [{
            "display": true,
            "type": "linear",
            "ticks": {
              "beginAtZero": true,
              "min": 0,
              "max": 100
            }
          }],
          "yAxes": [{
            "display": true,
            "stacked": true,
            "ticks": {
              "padding": 10,
              "beginAtZero": true,
              "min": 0,
              "max": 100
            }
          }]
        }
      }
    };
    var myChart = new Chart(ctx, config);

    setInterval(addingData, 1000/24);

    function addingData() {  
      mainData.push({x:x,y:y});
      x += 0.1;
      y = slope * x;
      if (x % 10 === 0) {
        points.push(y);
      }
      config.data.datasets[0].data = mainData;
      myChart.update();
      var img = new Image();
      img.src = canvas.toDataURL('image/png',1.0)
      img.onload = function () {
      graphImage = img;
        drawCanvas();
      };
    }

    function drawCanvas(){
      _ctx.drawImage(bg,0,0,600,400)
      _ctx.drawImage(graphImage,0,0,300,200);
    }