为什么我的画布动画帧之间的清楚吗？ [英] Why won't my canvas clear between animation frames?

问题描述

我决定从今天开始再次镖玩弄，由于某种原因，我不能让我的视帧之间清除。我试着使用clearRect和fillRect在整个画布元素绘制一个白色矩形。这里是我的code。

I decided to start playing around with dart again today and for some reason I can't get my viewport to clear between frames. I've tried to use clearRect and fillRect to draw a white rectangle over the entire canvas element. Here is my code.

import 'dart:html';

void main() {

  var canvasFun = new CanvasFun(query("#Game"));

}

class CanvasFun{

  CanvasElement canvas;

  num _width;
  num _height;

  Square square;

  CanvasFun(this.canvas){
    this.square = new Square(10,10, new Point(50,50));
    requestRedraw();
  }

  void draw(num _){
    var ctx = canvas.context2d;

    //clear the viewport

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);


    //draw the square
    this.square.draw(ctx);
    requestRedraw();

  }


  void requestRedraw() {
    window.requestAnimationFrame(draw);
  }

}
class Point {
  num x, y;

  Point(this.x, this.y);
}
class Square{
  num width;
  num height;

  num vectorX;
  num vectorY;

  Point location;

  Square(this.width, this.height, this.location){
    vectorX = 1;
    vectorY = 1;
  }

  void draw(CanvasRenderingContext2D context){
    context.save(); //I thought this might fix the blue viewport problem
    this.update(context);
    context.rect(this.location.x, this.location.y, this.width, this.height);
    context.fillStyle = "blue";
    context.fill();
  }
  void update(CanvasRenderingContext2D context)
  {
    num xBound = context.canvas.width;
    num yBound = context.canvas.height;

    if((this.location.x + this.width) > xBound){
      this.vectorX = -1;
    }
    else if(this.location.x < 0){
      this.vectorX = 1;
    }

    if((this.location.y + this.height) > yBound){
      this.vectorY = -1;
    }
    else if(this.location.y < 0){
      this.vectorY = 1;
    }

    this.location.x += (this.vectorX * 10);
    this.location.y += (this.vectorY * 20);


  }
}

将所得的动画绘制在正确的位置的矩形，但因为它的动作有关画布的矩形previous实例仍绘制。我想矩形只出现在画布上一次看起来像它动一下屏幕。

The resulting animation draws a rectangle at the correct location but as it moves about the canvas the previous instance of the rectangle is still drawn. I'd like the rectangle to only appear once on the canvas and to look like it is moving about the screen.

下面是输出的截图（注意蓝色方块不会被清零）：

Here is a screenshot of the output (notice the blue square is never cleared):

推荐答案

我简化您的code得到它的工作：

I simplified your code to get it working:

在 CanvasFun ：

void draw(num _){
    var ctx = canvas.context2d;

    //clear the viewport
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    //draw the square
    this.square.draw(ctx);
    requestRedraw();
}

在广场：

void draw(CanvasRenderingContext2D context){
    this.update(context);
    context.fillStyle = "blue";
    context.fillRect(this.location.x, this.location.y, this.width, this.height);
}

我不知道确切的问题是与原始版本虽然。 ：）

I'm not sure what the exact problem was with the original version though. :)

这篇关于为什么我的画布动画帧之间的清楚吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！