画布：如何使用事件处理程序旋转形状角度？

Question

我正在尝试制作一个弹球游戏并想知道弹球鳍运动的逻辑。

在右箭头的偶数处理程序上，我想将我的矩形块向上移动几度。

ctx.rotate(-(20*Math.PI/180));
    ctx.beginPath();
    ctx.rect(this.rposX , this.rposY, this.width, this.height);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
    ctx.rotate(20*Math.PI/180);
    if (rPressed) {
      this.flipRight(ctx);
}

我拥有的是什么。我应该怎样尝试翻转鳍状肢。有时候，我会旋转它，但会旋转所有物体。

Answer 1

旋转渲染

要做鳍状肢，你可以创建一个在原点（0,0）和沿着xAx从左到右绘制鳍状肢的函数。

因此，从矩形示例而不是绘制鳍状肢所在的矩形，绘制它以使画布坐标0,0位于旋转点。您将通过转换将其移动到正确的位置。

ctx.strokeRect(-10,-10,100,20); // 0,0 is point of rotation

通过移动其中心点setTransform来定位鳍状肢我使用setTransform，因为它不需要使用保存和恢复。

// x,y is the position you want the flipper to be.
ctx.setTransform(1,0,0,1,x,y); // sets position of flipper by moving point of rotation

然后用

旋转

ctx.rotate(angle); // angle is in radians

刚刚画出鳍状肢

ctx.strokeRect(-10,-10,100,20); // 0,0 is point of rotation

键盘事件

要制作动画，我每秒画60次鳍状肢。我有两个事件监听器监听keydown和keyup事件。当一个键关闭时，我将脚踏板标志设置为true，当键设置为false时。我不会在关键事件中做任何其他处理。

有关关键事件监听器的更多详细信息，请参阅演示

动画鳍状肢

在动画循环中，我调用了鳍状肢更新功能。它检查翻板是打开还是关闭，然后根据其状态移动翻板。每个动画帧都会调用一次此函数。

实施例

我很长时间没有做过鳍状肢或弹球游戏所以我有一点乐趣并创造了一些工作鳍状肢。

你想要的功能叫做drawFlipper它有注释。整个批次使用requestAnimationFrame

进行动画处理

＆＃13;

＆＃13;

// get the canvas context
const ctx = canvas.getContext("2d");
// defines the flipper
const flipper = {
  on : false,  // on when key down
  size : 20,  // radius of flipper base
  pos : 0.1,  
  shapeAng : Math.PI * 0.4, // approx angle to pointy end that line starts at the big arc
  point : 5,  // radius of pointy end
  length : 100, // length of flipper
  action : 0, // action is the rotational position 
  actionDest : 0, // is current destination where flipper should be
  actionV : 0.0, // is movement towards destination
  // next two numbers v must be 0 < v < 1
  actionAccel : 0.7, // relative acceleration of flipper for action. bigger number faster flipper
  actionDrag : 0.61, // amount of drag on flipper action. Smaller number more drag
  actionExtent : 1, // max travel of flipper
  actionBumperDamp : 0.8, // Amount of dampening flipper stop has
  update(){
     if(this.on){
        this.actionDest = this.actionExtent;
     }else{
          this.actionDest = 0; // home position
     }
     this.actionV += (this.actionDest - this.action) * this.actionAccel;
     this.actionV *= this.actionDrag
     this.action += this.actionV
     if(this.action > this.actionExtent){
         this.action = this.actionExtent;
         this.actionV *= this.actionBumperDamp;
         this.actionV -= this.actionV;
     }
  }
}

// keyboard listeners
document.addEventListener("keydown",(e)=>{ 
     flipper.actionDrag = Number(dragIn.value);
     flipper.actionAccel = Number(accelIn.value);
     flipper.on = true
});
document.addEventListener("keyup",(e)=>{ flipper.on = false});
window.focus(); // get the keyboards attention

// draws a flipper
// x,y is the location of the flipper base
// start angle is the home angle of the flipper
// flipperTravelDirection is flipper travel direction when active

function drawFlipper(x,y,startAng,flipperTravelDirection){
  // set the position
  ctx.setTransform(1,0,0,1,x,y);
  // set the angle of the flipper plus action position
  ctx.rotate(startAng + flipper.action * flipperTravelDirection);
  // draw the flipper. the transform sets position and rotation
  // so just have to render the flipper around its own center 0,0
  ctx.beginPath();
  ctx.arc(0, 0, flipper.size,flipper.shapeAng, Math.PI * 2 - flipper.shapeAng);
  ctx.lineTo(flipper.length, - flipper.point);
  ctx.arc(flipper.length,0,flipper.point,-Math.PI / 2,Math.PI /2)
  ctx.closePath();
  ctx.stroke();
}


var W,H; // canvas width and height
// draws the flippers. This function would do all rendering of the
// game animations
function mainLoop(time){
    // resize if needed
    if(canvas.width !== innerWidth || canvas.height !== innerHeight){ // resize canvas if window size has changed
        W = canvas.width = innerWidth;
        H = canvas.height = innerHeight;
    }
    // clear canvas 
    ctx.setTransform(1,0,0,1,0,0); // set default transform
    ctx.clearRect(0,0,W,H); // clear the canvas
    // update flipper actions
    flipper.update();
    // render the flippers left and right
    drawFlipper(flipper.size * 2, H / 2, Math.PI * 0.25,-1);
    drawFlipper(W - flipper.size * 2, H / 2, Math.PI * 0.75,1);
    // get next animation loop
    requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);

＆＃13;

canvas {
    position : absolute;
    top : 0px;
    left : 0px;
    z-index : -10;
}
body {font-family : arial;}

＆＃13;

Press any key to move flippers. Move sliders to change flipper acction.<br>
Left slider is acceleration, right is drag. Some settings make them flip out, change setting and hit key to fix<br>
Accel<input id="accelIn" type="range" min = 0.01 max = 0.99 step = 0.01 value = 0.5></input>
Drag<input id="dragIn" type="range" min = 0.01 max = 0.99 step = 0.01 value = 0.5></input>
<canvas id=canvas></canvas>

＆＃13;

＆＃13;

＆＃13;