Question

附带的Js Fiddle画了一个盒子，点击鼠标。它在很大程度上按预期工作。除非每次在画布上绘制一个新的盒子，它每次都会越来越快地加速到它太快的程度。

我console.log dx/dy var canvas = document.getElementById('myCanvas'); var logger = document.getElementById('logger'); var ctx = canvas.getContext('2d'); var x = 0; var y = 0; var dx = -2; var dy = -2; var boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); var boxSize = 20; var mousex, mousey; canvas.addEventListener('click',function(e){ mousex = e.clientX; mousey = e.clientY; x = mousex - canvas.offsetLeft-(boxSize/2); y = mousey - canvas.offsetTop-(boxSize/2); draw(); }); function draw(){ logger.innerHTML = "x: " + x + "y: " + y; ctx.clearRect(0,0,canvas.width,canvas.height); collistionDetection(); ctx.beginPath(); ctx.rect(x,y,boxSize,boxSize); ctx.fillStyle=boxColour; ctx.fill(); ctx.closePath(); x+=dx; y+=dy; requestAnimationFrame(draw); }; function collistionDetection(){ if(x<0 || x>canvas.width-boxSize){ dx = -dx; boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); }; if(y<canvas.offsetTop-(boxSize/2) || y>canvas.height-boxSize){ boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); dy = -dy; }; }; * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; margin-top:10px; }的价值并没有增加价值，所以不是这样，我不这么认为。

dx值是盒子移动的位置。

任何一个人都能解释一下吗？

＆＃13;

<canvas id="myCanvas" width='480' height='320'></canvas>
<div id="logger"></div>

＆＃13;

module AwsAuth
  extend ActiveSupport::Concern

  require 'aws-sdk'

  def get_cognito_user(token)
    cognitoidentityprovider = Aws::CognitoIdentityProvider::Client.new(region: ENV['AWS_REGION'])

    begin
      cognito_user = cognitoidentityprovider.get_user({ access_token: token })

      puts cognito_user

      return {"email" => cognito_user.username}

    rescue StandardError => msg
      puts "ERROR!"
      puts msg
      return {"error" => msg}
    end
  end
end

＆＃13;

#<Aws::CognitoIdentityProvider::Types::GetUserResponse:0x7fe51b0013a8
    mfa_options = nil,
    user_attributes = nil,
    username = nil
>

＆＃13;

我们非常感谢您的帮助由于
MOE

Answer 1

我认为你的requestAnimationFrames没有被清除，所以你每次点击都会越来越频繁地调用你的动画函数。我对下面的代码进行了一些小改动似乎有所帮助。

＆＃13;

    var canvas = document.getElementById('myCanvas');
    var logger = document.getElementById('logger');
    var ctx = canvas.getContext('2d');
    var x = 0;
    var y = 0;
    var dx = -2;
    var dy = -2;
    var boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    var boxSize = 20;
    var mousex,
        mousey;
    var lastAnimationFrame;
    canvas.addEventListener('click',function(e){
      mousex = e.clientX;
      mousey = e.clientY;
      x = mousex - canvas.offsetLeft-(boxSize/2);
      y = mousey - canvas.offsetTop-(boxSize/2);
      cancelAnimationFrame(lastAnimationFrame)
      draw();
    });
    
    function draw(){
      logger.innerHTML = "x: " + x + "y: " + y;
      ctx.clearRect(0,0,canvas.width,canvas.height);
      collistionDetection();
      ctx.beginPath();
      ctx.rect(x,y,boxSize,boxSize);
      ctx.fillStyle=boxColour;
      ctx.fill();
      ctx.closePath();
      x+=dx;
      y+=dy;
      lastAnimationFrame = requestAnimationFrame(draw);
    };
    
    function collistionDetection(){
      if(x<0 || x>canvas.width-boxSize){
        dx = -dx;
        boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
      };
      if(y<canvas.offsetTop-(boxSize/2) || y>canvas.height-boxSize){
        boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
        dy = -dy;
      };
    };

＆＃13;

    * { padding: 0; margin: 0; }
    canvas { background: #eee; display: block;
      margin: 0 auto; margin-top:10px;

＆＃13;

<canvas id="myCanvas" width='480' height='320'></canvas>
<div id="logger"></div>

＆＃13;

Answer 2

因为每次单击鼠标，您再次调用draw，并且此代码中显示的调用是递归的并且不断调用自身。因此，每次点击，您都会有一连串的draw。

您可以添加布尔值来检查最初是否已调用draw，如果是，请阻止draw函数中的后续调用：

if(!initialized)
{
    requestAnimationFrame(draw);
    initialized = true;
}

为什么我的帆布盒的移动会随着点击而增加？

2 个答案: