Javascript Chart.js在iPad上的性能问题
我用chart.js和canvas创建了一个小游戏。然而,我只有一个画布来创建整个游戏,所以我也想在画布上画一些图像。 正因为如此,这款游戏在windows和android手机上都表现出色,但我在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
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);
}