分享
三行代码  ›  专栏  ›  技术社区  ›  Luna Rupert

如何在画布javascript中使用计时器?

  •  0
  • Luna Rupert  · 技术社区  · 1 周前

     function rectangle(x,y){
        var ctx
        ctx.beginPath();
        ctx.rect(20, 20, 15, 10);
        ctx.stroke();
        }
     function randomMove(){
        var myVar;
        var x;
        var y;
        x = Math.floor(Math.random() * 10) + 1;
        y = Math.floor(Math.random() * 10) + 1;
        myVar = setInterval( ()=> {rectangle(x,y)}, 5000); // pass the rectangle function
        }
    
    1 回复  |  直到 1 周前
        1
  •  1
  •   Daniel    1 周前

    你需要清理画布。

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

    或者如果它是透明的。。。

    ctx.clearRect(0, 0, width, height);
    

    你需要在每一帧上都这样做。

    const ctx = window.canvas.getContext("2d");
    
    function clearCanvas() {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }
    
    function rectangle(x, y) {
      ctx.beginPath();
      ctx.fillStyle = "red";
      ctx.rect(x, y, 15, 10);
      ctx.stroke();
    }
    
    function randomMove() {
      var myVar;
      var x;
      var y;
      x = Math.floor(Math.random() * ctx.canvas.width) + 1;
      y = Math.floor(Math.random() * ctx.canvas.height) + 1;
      rectangle(x, y);
    }
    
    function draw() {
      clearCanvas();
      randomMove();
    }
    
    myVar = setInterval(draw, 200);
    draw();
    <canvas id="canvas"></canvas>