HTML5 Canvas Javascript - 如何使用“translate3d”制作带有瓷砖的可移动画布？ 立即调用 drawMap 而不是使用 requestAnimationFrame使用非整数求余数Math.round vs Math.floor使用容器和 css 隐藏画布的移动部分一起

如何解决HTML5 Canvas Javascript - 如何使用“translate3d”制作带有瓷砖的可移动画布？ 立即调用 drawMap 而不是使用 requestAnimationFrame使用非整数求余数Math.round vs Math.floor使用容器和 css 隐藏画布的移动部分一起

我在使用可移动画布时遇到问题，该画布会随着“玩家”在地图上移动而进行调整。由于每秒绘制 600 个图块非常低效，因此我切换到使用 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 = ['black','green','orange'][Math.floor((i+j+canvasRefresh.x1+canvasRefresh.y1)%3)];
            ctx.fillRect(tileSize * i,tileSize * j,tileSize,tileSize);
        }
    }
}
function moveMap(){
    const sector = {
        x: Math.round(-MAIN.position.x % tileSize),y: Math.round(-MAIN.position.y % tileSize)
    };
    const x2 = Math.floor(MAIN.position.x/tileSize);
    const y2 = Math.floor(MAIN.position.y/tileSize);
    if(canvasRefresh.x1 != x2 || canvasRefresh.y1 != y2){
        canvasRefresh.x1 = x2;
        canvasRefresh.y1 = y2;
        requestAnimationFrame(drawMap);
    }
    $('#canvas').css({
        transform: "translate3d(" + sector.x + "px," + sector.y + "px,0)"
    });
}
update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id=canvas></canvas>

解决方法

发生了一些事情：

立即调用 drawMap 而不是使用 requestAnimationFrame

正如 ggorlen 在评论中提到的，在更新周期中多次使用 requestAnimationFrame 是一种不寻常的做法。当您使用 requestAnimationFrame 时，您将在下一帧更新时调用该函数，这意味着将有一个地图未重绘的帧，从而导致轻微闪烁。相反，如果您立即调用它，它将为该帧重新绘制地图。此外，将所有绘画和更新合并为一次调用 requestAnimationFrame 也是一个好主意，因为这样可以更清楚地了解事物的更新顺序。

所以你应该把 requestAnimationFrame(drawMap); 改为 drawMap();

使用非整数求余数

模运算（即 % 运算符）通常适用于整数。在您有 MAIN.position.x % tileSize 的情况下，它每隔一段时间就会出现故障，因为 tileSize 不是整数 (200 / 6)。要使用非整数求余数，我们可以使用自定义函数：

function remainder(a,b) {
  return a - Math.floor(a / b) * b;
}

并用我们的新函数替换模运算的实例（例如将 MAIN.position.x % tileSize 更改为 remainder(MAIN.position.x,tileSize)）

Math.round vs Math.floor

最后，您可能希望使用 Math.floor 而不是 Math.round，因为 Math.round 返回 0，对于 (-1,0) 和 (0,1) 之间的范围，而Math.floor 返回 -1 和 0。

使用容器和 css 隐藏画布的移动部分

您可能希望使用包含 div 和相应的 css 来隐藏正在重绘的画布边缘：

在 HTML 中：

<div class="container">
<canvas id=canvas></canvas>
</div>

在 CSS 中：

.container {
  width: 560px;
  height: 160px;
  overflow: hidden;
}

一起

整体看起来是这样的：

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 = ['black','green','orange'][Math.floor((i+j+canvasRefresh.x1+canvasRefresh.y1)%3)];
            ctx.fillRect(tileSize * i,tileSize * j,tileSize,tileSize);
        }
    }
}
function remainder(a,b) {
  return a - Math.floor(a / b) * b;
}
function moveMap(){
    const sector = {
        x: Math.floor(-remainder(MAIN.position.x,tileSize)),y: Math.floor(-remainder(MAIN.position.y,tileSize))
    };
    const x2 = Math.floor(MAIN.position.x/tileSize);
    const y2 = Math.floor(MAIN.position.y/tileSize);
    if(canvasRefresh.x1 != x2 || canvasRefresh.y1 != y2){
        canvasRefresh.x1 = x2;
        canvasRefresh.y1 = y2;
        drawMap();
    }
    $('#canvas').css({
        transform: "translate3d(" + sector.x + "px," + sector.y + "px,0)"
    });
}
update();

.container {
  width: 560px;
  height: 160px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<canvas id=canvas></canvas>
</div>

,

根据上面的评论表明您只想在现有代码上平滑地移动画布并且没有修改的计划，您是否尝试过向 canvas 元素添加缓动过渡？

canvas { transition: all 1500ms cubic-bezier(0.250,0.100,0.250,1.000); transition-timing-function: cubic-bezier(0.250,1.000); /* ease (default) */ }

const ctx = canvas.getContext('2d');
canvas.height = 200;
canvas.width = 600;
const tileSize = canvas.height/6;
const MAIN = {position:{x: 120,tileSize);
        }
    }
}
function moveMap(){
    const sector = {
        x: Math.round(-MAIN.position.x % tileSize),y: Math.round(-MAIN.position.y % tileSize)
    };
    const x2 = Math.floor(MAIN.position.x/tileSize);
    const y2 = Math.floor(MAIN.position.y/tileSize);
    if(canvasRefresh.x1 != x2 || canvasRefresh.y1 != y2){
        canvasRefresh.x1 = x2;
        canvasRefresh.y1 = y2;
        requestAnimationFrame(drawMap);
    }
    $('#canvas').css({
        transform: "translate3d(" + sector.x + "px,0)"
    });
}
update();

canvas {
  transition: all 1500ms cubic-bezier(0.250,1.000); /* ease (default) */
  transition-timing-function: cubic-bezier(0.250,1.000); /* ease (default) */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id=canvas></canvas>

我个人不会移动画布本身，而是移动里面的元素，通过向方向添加行/列并在相反方向移除方块。但是，这应该可以解决您提出的问题