我在使用可移动画布时遇到问题，该画布会随着“玩家”在地图上移动而进行调整。由于绘制 600 个瓷砖，每秒 60 次非常低效，我切换到使用translate3d并且只有draw在玩家越过一个完整的瓷砖时 - 但它一直出现故障并且不能平滑地移动。我将如何正确实现这一目标？
const ctx = canvas.getContext('2d');
canvas.height = 200;
canvas.width = 600;
const tileSize = canvas.height/6;
const MAIN = {position:{x: 120, y: 120}};
const canvasRefresh = {x: 0, y: 20};
document.body.onmousemove = e => MAIN.position = {x: e.clientX, y: e.clientY};
const tiles = {x: 20, y: 20}
function update(){
moveMap();
requestAnimationFrame(update);
}
function drawMap(){
for(var i = 0; i < tiles.x; i++){
for(var j = 0; j < tiles.y; j++){
ctx.fillStyle …