javascript - iPad 上的 Chart.js 性能问题
问题描述
我使用 chart.js 和 canvas 创建了一个小游戏。但是我只有一个画布来创建整个游戏,所以我也想在画布上绘制一些图像。因此,这些游戏在 Windows 和 android 手机上都表现出色,但我在 iPad 上遇到了性能问题。谁能帮助我完成只保留一张画布的任务
我在下面的笔中重新创建了场景
https://codepen.io/sushantipte48/pen/voLxyW
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);
}
解决方案
推荐阅读
- firebase - 流初始状态是 ConnectionState.waiting 而不是 null
- angular - TypeScript/Angular:尝试将两个数组连接在一起时出现 TypeError
- c# - PeopleAPI 错误 403 Google 错误与否
- html - 一般兄弟姐妹在悬停时不起作用
- javascript - 如何使用 Google Drive Javascript API 更新 Google Drive 中的 zip 文件
- python - 如果预测的类标签是列表列表并且真实值是列表,则混淆矩阵
- r - 在R中按冬季而不是年份分组月份
- javascript - Discord.js 审核日志
- phpstorm - 如何只从远程服务器下载特定文件而不是整个项目?
- angular - 模态关闭后以角度更新视图