帆布多个弹跳方块 - 清除画布 [英] Canvas multiple bouncing squares - Clearing Canvas
问题描述
我使用画布在javascript中创建了一个弹跳框演示。每个盒子（为了更好的单词）都会处理它自己的更新和渲染。但是，我的问题在于在绘制下一帧之前清除画布。它在盒子移动时清除干净，但在撞击墙壁后留下伪影。这是一个小提琴 - https://jsfiddle.net/dzuvL7ph/1/
这里是我的代码;
函数init（）{
window.box1 =新Box（50，'red'，0，0）;
window.box2 = new Box（50，'blue'，400，20）;
requestAnimationFrame（update）;
}
function update（）{
window.box1.update（）;
window.box2.update（）;
requestAnimationFrame（update）;
requestAnimationFrame（render）;
}
函数render（）{
window.box1.render（）;
window.box2.render（）;
}
// ----------------------------------- -------------------------------------------------- ------------------
// -
// ------------------ -------------------------------------------------- -----------------------------------
var Box =函数（尺寸，颜色，x， y）{
this.width = dimensions;
this.height = dimensions;
this.x = x;
this.y = y;
this.velocityX = 10;
this.velocityY = 10;
this.color = color;
this.context = document.getElementById（'canvas'）。getContext（'2d'）;
this.update = function（）{
this.x + = this.velocityX;
this.y + = this.velocityY;
this.collisionCheck（）;
};
this.render = function（）{
this.context.fillStyle = this.color;
this.context.clearRect（this.x - this.velocityX，this.y - this.velocityY，this.width，this.height）;
this.context.fillRect（this.x，this.y，this.width，this.height）;
};
this.collisionCheck = function（）{
if（this.y> 600 - this.height || this.y< 0）
this.velocityY * = -1;
if（this.x> 800 - this.width || this.x< 0）
this.velocityX * = -1;
};
};
我认为这是与 this.context.clearRect（this.x - this.velocityX，this.y - this.velocityY，this.width，this.height）; 但我无法弄清楚我做错了什么。
这有点奇怪，你正在为每个盒子进行清理。通常情况下，您会在每一帧中擦除整个画布： https： //www.jsfiddle.net/yb58fd47/
为什么会发生这样的情况
您的 update 函数检查冲突，这可以反过来反转速度组件。但是，您的 render 函数依赖于该速度组件准确地表示最后一次速度。如果你不想清除整个画布，你可以跟踪盒子以前的实际速度（我添加了 velocityXLast 和 velocityYLast ）：
canvas {border： 1px solid black}
< canvas id =canvas width =400height =150>< / canvas>
I've created a little bouncing boxes demo in javascript using the canvas. Each box (for want of a better word) class handles it's own updates and rendering. However, my problem lies in clearing the canvas before drawing the next frame. It clears fine when the boxes are moving but leaves artifacts behind after it hits a wall. Here's a fiddle - https://jsfiddle.net/dzuvL7ph/1/
Here's my code;
function init(){
window.box1 = new Box(50, 'red', 0, 0);
window.box2 = new Box(50, 'blue', 400, 20);
requestAnimationFrame(update);
}
function update() {
window.box1.update();
window.box2.update();
requestAnimationFrame(update);
requestAnimationFrame(render);
}
function render() {
window.box1.render();
window.box2.render();
}
// -------------------------------------------------------------------------------------------------------
// --
// -------------------------------------------------------------------------------------------------------
var Box = function(dimensions, color, x, y){
this.width = dimensions;
this.height = dimensions;
this.x = x;
this.y = y;
this.velocityX = 10;
this.velocityY = 10;
this.color = color;
this.context = document.getElementById('canvas').getContext('2d');
this.update = function(){
this.x += this.velocityX;
this.y += this.velocityY;
this.collisionCheck();
};
this.render = function(){
this.context.fillStyle = this.color;
this.context.clearRect(this.x - this.velocityX, this.y - this.velocityY, this.width, this.height);
this.context.fillRect(this.x, this.y, this.width, this.height);
};
this.collisionCheck = function(){
if(this.y > 600 - this.height || this.y < 0)
this.velocityY *= -1;
if(this.x > 800 - this.width || this.x < 0)
this.velocityX *= -1;
};
};
I assume it's to do with this.context.clearRect(this.x - this.velocityX, this.y - this.velocityY, this.width, this.height); but I can't figure out what I'm doing wrong.
It's a little weird you're doing a cleanup for each box. Normally, you'd wipe the whole canvas on each frame: https://jsfiddle.net/yb58fd47/
WHY it happens
Your update function checks for collisions, which can in turn reverse the speed component(s). But, your render function relies on that speed component to accurately represent the last speed. If you don't want to clear the whole canvas, you can keep track of the previous actual speed the box had (I added velocityXLast and velocityYLast):
function init(){
window.box1 = new Box(50, 'red', 0, 0);
window.box2 = new Box(50, 'blue', 120, 20);
requestAnimationFrame(update);
}
function update() {
window.box1.update();
window.box2.update();
requestAnimationFrame(update);
requestAnimationFrame(render);
}
function render() {
window.box1.render();
window.box2.render();
}
// -------------------------------------------------------------------------------------------------------
// --
// -------------------------------------------------------------------------------------------------------
var Box = function(dimensions, color, x, y){
this.width = dimensions;
this.height = dimensions;
this.x = x;
this.y = y;
this.velocityX = 10;
this.velocityY = 10;
this.color = color;
this.context = document.getElementById('canvas').getContext('2d');
this.update = function(){
this.x += this.velocityX;
this.y += this.velocityY;
this.velocityXLast = this.velocityX;
this.velocityYLast = this.velocityY;
this.collisionCheck();
};
this.render = function(){
this.context.fillStyle = this.color;
this.context.clearRect(this.x - this.velocityXLast, this.y - this.velocityYLast, this.width, this.height);
this.context.fillRect(this.x, this.y, this.width, this.height);
};
this.collisionCheck = function(){
if(this.y > 150 - this.height || this.y < 0)
this.velocityY *= -1;
if(this.x > 400 - this.width || this.x < 0)
this.velocityX *= -1;
};
};
init();
canvas {border: 1px solid black}
<canvas id="canvas" width="400" height="150"></canvas>
这篇关于帆布多个弹跳方块 - 清除画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
