JavaScript画布代码不起作用答案

【问题标题】：JavaScript canvas code not workingJavaScript画布代码不起作用
【发布时间】：2017-08-26 13:40:21
【问题描述】：

这是我用于矩形船的 JS 画布代码。如果我注释掉 switch 语句，船是可见的。在取消注释 switch 语句时，船没有显示。怎么了？

 var ship = function() {
     this.velocityX = 0;
     this.velocityY = 0;
     this.accelerationX = 0;
     this.accelerationY = 0;
     this.x = width / 2;
     this.y = height / 2;
     this.speed = 4;
     this.angle = 0;

     this.control = function() {
         context.save();
         context.translate(this.x, this.y);

         this.addEventListener("keydown", function(event) {
             switch (event.keyCode) {
                 case 36:
                     this.accelerationX = Math.cos(this.angle) * this.speed;
                     this.accelerationY = Math.sin(this.angle) * this.speed;
                     break;
                 case 38:
                     this.accelerationX = -Math.cos(this.angle) * this.speed;
                     this.accelerationY = -Math.sin(this.angle) * this.speed;
                     break;
                 case 37:
                     this.angle -= 0.5;
                     break;
                 case 40:
                     this.angle += 0.5;
                     break;
             }
         });

         context.rotate(this.angle);
         context.fillStyle = "rgb(255,255,255)";
         context.fillRect(0, 0, 20, 30);
         context.restore();
     };
 };

【问题讨论】：

JSHint 只检测语法错误，不会检测任何运行时错误。
无论如何你确定你的变量、角度、x 和 y 已经定义了吗？ this.angle != 角度
好的，我将其更改为 context.rotate(this.angle) 并且取消注释该行现在不会导致问题。也改变了 x 和 y。
好吧，我只是错过了一堆这个关键字。我更新一下代码，好像还是有问题。
在我看来，您似乎需要更好地理解关键字this。

标签： javascript html html5-canvas translate-animation

【解决方案1】：

我用你的代码编写了代码来测试你的想法。该脚本可以单独运行，没有任何附加功能，但仍需要改进。也许我的一些更正对你有用：

<html>
<head>  

</head>
<body>
  <canvas id="canvas" style="border: 1px solid black;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var resistance = 0.8;
canvas.width = 400;
canvas.height = 400;

 var ship = function() {
     this.velocityX = 0;
     this.velocityY = 0;
     this.accelerationX = 0;
     this.accelerationY = 0;
     this.x = canvas.width / 2;
     this.y = canvas.height / 2;
     this.speed = 0.5;
     this.angle = 0;

     this.control = function() {
           context.clearRect(0,0,canvas.width,canvas.height);
        this.velocityX += this.accelerationX;
        this.velocityY += this.accelerationY;
      //  context.beginPath();
        context.save();
        context.translate(this.x, this.y);
        this.velocityX *= resistance;
        this.velocityY *= resistance;
        this.x += this.velocityX;
         this.y += this.velocityY;
         context.rotate(this.angle);
        // context.fillStyle = "rgb(255,255,255)";

         context.fillRect(0, 0, 30, 20);
         context.restore();
         this.accelerationX = 0;
         this.accelerationY = 0;
     };
 };

  var s = new ship();
  var keyMap = [];
    setInterval(function(){s.control();}, 1);
     setInterval(function(){move();}, 1);

document.onkeydown = keydown;
document.onkeyup = keyup;

function move()
{
    if(keyMap[38])
  {
                     s.accelerationX = Math.cos(s.angle) * s.speed;
                    s.accelerationY = Math.sin(s.angle) * s.speed;
  }
    if(keyMap[40])
  {

                     s.accelerationX = -Math.cos(s.angle) * s.speed;
                     s.accelerationY = -Math.sin(s.angle) * s.speed;
  }              
     if(keyMap[37])
  {
                     s.angle -= 0.05;
  }                 
     if(keyMap[39])
  {
                    s.angle += 0.05;
  }
}

function keydown(e)
{
    keyMap[e.keyCode] = true;
}

function keyup(e)
{
    keyMap[e.keyCode] = false;
}

</script>
</body>
</html>

【讨论】：

最后两个函数 keydown 和 keyup 是自动调用的吗？
是的。它们被分配给事件：document.onkeydown 和 document.onkeyup