캔버스의 회전 애니메이션 중에 예기치 않은 동작이 발생했습니다.

Question

애니메이션을 사용하여 일부 스터디를 연구하고 일부 jquery를 사용하여 애니메이션을 만들었습니다. mousemove jquery 이벤트를 통해 사용자 마우스로 움직일 때 다른 사각형이 화면에 충돌하면 (square2) 해당 사각형이 특정 길이만큼 이동하고, 대상이 회전 할 것으로 예상되는 것보다 가장자리 근처에서 충돌합니다. 객체가 회전 할 때 사각형의 외곽선의 의사 잔상이 생기는 문제가 있습니다. 처음에는 square2 주위에 더 넓은 영역을 포함하는 clearRect() 메서드를 사용하여 afterImage를 제거 할 수 있다고 생각했지만 문제가 해결되지 않았을뿐만 아니라 원하지 않는 첫 번째 사각형의 일부를 보이지 않게했습니다. 만약 누군가가이 코드에서 잘못 된 부분이 어디인지 추측 할 수 있다면 분명히 고맙겠습니다.

var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = 1000; 
    canvas.height = 400; 
    var width = canvas.width; 
    var height = canvas.height; 
    var particles = []; 

    var mouseSize = 50; 
    var isColliding = false; 
    var mouseX; 
    var mouseY; 
    var animationForward = false; 

    function particle() { 
     var particle = { 
     originX: width/2, 
     originY: height/2, 
     x: width/2, 
     y: height/2, 
     size: 30, 
     centerPointX: this.x + this.size/2, 
     centerPointY: this.y + this.size/2, 
     decay: .98, 
     vx: 0, 
     vy: 0, 
     rotate: 0, 
     vr: 0, 

     draw: function() { 
      ctx.fillStyle = "white"; 
      ctx.fillRect(this.x, this.y, this.size, this.size) 

      //   rotation logic 
// method found at http://stackoverflow.com/questions/2677671/how-do-i-rotate-a-single-object-on-an-html-5-canvas 
      function drawImageRot(x, y, width, height, deg) { 
      ctx.clearRect(x, y, width, height); 
      //Convert degrees to radian 
      var rad = deg * Math.PI/180; 
      //Set the origin to the center of the image 
      ctx.translate(x + width/2, y + height/2); 
      //Rotate the canvas around the origin 
      ctx.rotate(rad); 
      //draw the image  
      ctx.fillRect(width/2 * (-1), height/2 * (-1), width, height); 
      //reset the canvas 
      ctx.rotate(rad * (-1)); 
      ctx.translate((x + width/2) * (-1), (y + height/2) * (-1)); 
      } 

      //check for collision 
      if (mouseX < particles[0].x + particles[0].size && 
      mouseX + mouseSize > particles[0].x && 
      mouseY < particles[0].y + particles[0].size && 
      mouseSize + mouseY > particles[0].y) { 
      isColliding = true; 
      } else { 
      isColliding = false; 
      } 

      //controlling velocity dependending on location of collision. 
      if (isColliding) { 
      //x axis 
      animationForward = true; 

      // checking below to see if mouseRect is hitting near the center of particleRect. 
      // if it hits near center the vy or vx will not be as high depending on direction and if it    //does not than we will make square rotate 
      if (mouseX < this.x) { 
       this.vr = 3 + Math.random() * 10 
       if (mouseX + mouseSize/2 > this.x) { 
       this.vx = 0 + Math.random() * 2; 
       } else { 
       this.vx = 3 + Math.random() * 3; 

       } 
      } else { 
       this.vr = -3 - Math.random() * 10 
       if (mouseX + mouseSize/2 < this.x + this.size) { 
       this.vx = 0 - Math.random() * 2; 
       } else { 
       this.vx = -3 - Math.random() * 3; 
       } 
      } 

      //y axis checking 

      if (mouseY < this.y) { 
       if (mouseY + mouseSize/2 > this.y) { 
       this.vy = 0 + Math.random() * 2; 
       } else { 
       this.vy = 3 + Math.random() * 3; 
       } 
      } else { 
       if (mouseY + mouseSize/2 < this.y + this.size) { 
       this.vy = 0 - Math.random() * 2; 
       } else { 
       this.vy = -3 - Math.random() * 3; 
       } 
      } 

      } 

      //decay all motions each frame while animation is forward 
      if (animationForward) { 
      this.vx *= this.decay; 
      this.vy *= this.decay; 
      this.vr *= this.decay; 
      } 

      //when animation is done, set all velocities to 0 
      if (this.x != this.originX && Math.abs(this.vx) < .1 && this.y != this.originY && Math.abs(this.vy) < .1) { 
      animationForward = false; 
      this.vx = 0; 
      this.vy = 0; 
      this.vr = 0 
      } 

      //x check to see if animation over. if it is slowly put square back to original location 
      if (this.x != this.originX && !animationForward) { 
      if (this.x > this.originX) { 
       this.vx = -1; 
      } 
      if (this.x < this.originX) { 
       this.vx = 1; 
      } 

      if (this.x > this.originX && this.x - this.originX < 1) { 
       this.vx = 0; 
       this.x = this.originX; 
      } 
      if (this.x < this.originX && this.originX - this.x < 1) { 
       this.vx = 0; 
       this.x = this.originX; 
      } 
      } 
      //   end x collison 

      //   y check to see if animation over 

      if (this.y != this.originX && !animationForward) { 
      if (this.y > this.originY) { 
       this.vy = -1; 
      } 
      if (this.y < this.originY) { 
       this.vy = 1; 
      } 

      if (this.y > this.originY && this.y - this.originY < 1) { 
       this.vy = 0; 
       this.y = this.originY; 
      } 
      if (this.y < this.originY && this.originY - this.y < 1) { 
       this.vy = 0; 
       this.y = this.originY; 
      } 
      } 
      //   end y collison 

      //check rotation 

      if (this.rotate != 0 && !animationForward) { 
      this.rotate = Math.round(this.rotate); 

      if (this.rotate < 0) { 
       if (this.rotate < -300) { 
       this.rotate += 10 
       } else if (this.rotate < -200) { 
       this.rotate += 7 
       } else if (this.rotate < -125) { 
       this.rotate += 5 
       } else if (this.rotate < -50) { 
       this.rotate += 3 
       } else { 
       this.rotate++; 
       } 
      } else { 
       if (this.rotate > 300) { 
       this.rotate -= 10; 
       } else if (this.rotate > 200) { 
       this.rotate -= 7 
       } else if (this.rotate > 125) { 
       this.rotate -= 5 
       } else if (this.rotate > 50) { 
       this.rotate -= 3 
       } else { 
       this.rotate--; 
       } 
      } 

      } 

      // move the rect based off of previous set conditions and make square rotate if edges hit 

      this.x += this.vx; 
      this.y += this.vy; 
      this.rotate += this.vr; 
      drawImageRot(this.x, this.y, this.size, this.size, this.rotate); 

      //   boundary control 

      if (this.x + this.size > width || this.x < 0) { 
      this.vx = -this.vx * 2 
      } 
      if (this.y + this.size > height || this.y < 0) { 
      this.vy = -this.vy * 2 
      } 

     } 
     } 
     return particle; 
    } 

    function createParticles() { 
     particles.push(particle()) 

     //wouldnt be too hard to put more particles. would have to go back and change the isColliding and animationForward global variable and make each object have their own to check. also would have to go back and implement for loops wherever i mention an element in my array 
    } 

    createParticles(); 

    function draw() { 
     console.log(particles[0].rotate); 
     ctx.clearRect(0, 0, width, height); 

     ctx.fillStyle = 'white'; 
     ctx.fillRect(mouseX, mouseY, mouseSize, mouseSize); 

     particles[0].draw(); 

     requestAnimationFrame(draw); 
    } 

    $("#canvas").mousemove(function(event) { 
     mouseX = event.pageX; 
     mouseY = event.pageY; 
    }) 

    window.onload = draw(); 

Answer 1

나는 당신의 문제는 바로 여기에 생각 :

draw: function() { 
     ctx.fillStyle = "white"; 
     ctx.fillRect(this.x, this.y, this.size, this.size) 
     .... 

당신이있어 2 모양을 받고있다. 이 줄을 주석 처리하고 의사 이미지는 사라져야합니다.