javascript - HTML5 Canvas Javascript - 如何使用“translate3d”制作带有瓷砖的可移动画布？

问题描述

我在使用可移动画布时遇到问题，该画布会随着“玩家”在地图上的移动而调整。由于绘制 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 = ['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>

标签： javascripthtmlcanvastranslate3d

解决方案

有几件事正在发生：

立即调用`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`对比`Math.floor`

最后，您可能想要使用Math.floor而不是Math.round，因为Math.round对于 (-1, 0) 和 (0, 1) 之间的范围都返回 0，而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>