html5キャンバスにレンダリングされる長方形の配列または「パイプ」があります。新しいパイプは、レンダリング（およびアニメーション化）される前に配列に動的に追加されます。問題は、新しいパイプごとに、それ自体と前のパイプの間に小さなギャップがあり、次のパイプが導入されると、このギャップがなくなることです。どの時点でもギャップがあってはなりません。
それはとても奇妙で、私を怒らせています。
以下のCodepenリンクは、この質問をより明確にするはずです。
const body = document.getElementsByTagName("body")[0];
const canvasWidth = 500;
const canvasHeight = 820;
const canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var frame_count = 0;
var speed = 1;
var pipes = [];
function Pipe(height) {
this.x = canvasWidth;
this.height = height;
this.update = function() {
ctx.fill();
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.rect(this.x, 0, 100, this.height);
this.x = this.x - (1 * speed);
};
}
function setup() {
// Render blank canvas to dom
canvas.width = canvasWidth;
canvas.height = canvasHeight;
body.appendChild(canvas);
}
function draw() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Pipe generator
if (frame_count % 100 === 0) {
if (frame_count % 200 === 0) {
pipes.push(new Pipe(100));
} else {
pipes.push(new Pipe(120));
}
}
// Draw pipes
for (i = 0; i < pipes.length; i++) {
pipes[i].update();
}
}
function loop() {
setTimeout(function() {
draw();
frame_count++;
requestAnimationFrame(loop);
}, 0);
}
setup();
loop();これは、描画関数ですべてを逆に行うために発生します;-)
現在、最初に現在のパスを入力し、次にそれを宣言して、最後に位置を更新しています。1フレーム待つのではなく、最新バージョンの図面を塗りつぶすように、他の方法で行う必要があります。
同じフレーム内で次のシェイプが前のシェイプの現在の状態を描画していたため、複数のシェイプが描画されたときに修正されたように見えました。
const body = document.getElementsByTagName("body")[0];
const canvasWidth = 500;
const canvasHeight = 820;
const canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var frame_count = 0;
var speed = 1;
var pipes = [];
function Pipe(height) {
this.x = canvasWidth;
this.height = height;
this.update = function() {
// first update position
this.x = this.x - (1 * speed);
ctx.fillStyle = 'black';
// then declare the path
ctx.beginPath();
ctx.rect(this.x, 0, 100, this.height);
// finally draw it
ctx.fill();
};
}
function setup() {
// Render blank canvas to dom
canvas.width = canvasWidth;
canvas.height = canvasHeight;
body.appendChild(canvas);
}
function draw() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Pipe generator
if (frame_count % 100 === 0) {
if (frame_count % 200 === 0) {
pipes.push(new Pipe(100));
} else {
pipes.push(new Pipe(120));
}
}
// Draw pipes
for (i = 0; i < pipes.length; i++) {
pipes[i].update();
}
}
function loop() {
// do not mix setTimeout and rAF, it's like having a Ferrari parked in a truck...
// setTimeout(function() {
draw();
frame_count++;
requestAnimationFrame(loop);
// }, 0);
}
setup();
loop();この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加