在JavaScript中浏览Mozilla突破教程，但由于某种原因我的桨没有被绘制，为什么会这样？

Question

画布宽度为：400px，高度为：400px

  var paddleHeight = 10;
  var paddleWidth = 75;
  var paddleX = (canvas.width-paddleWidth)/2;
  function drawPaddle(){
  canv.beginPath();
  canv.rect(paddleX,canvas.width-paddleWidth,paddleWidth,paddleHeight);
  canv.fillStyle = "blue";
  canv.fill();
  canv.closePath();
  }drawPaddle();

我从字面上将粘贴的Mozilla代码复制到我的代码中，并在几次尝试后更改了一些变量名。

Answer 1

稍加修改，我就可以使用您的代码了。 值得注意的是，我从画布上获得了2d上下文（您可能在其他地方已经做过），并将其称为ctx而不是canvas 。 我还在html中明确设置了画布的height和width 。 如果您以前是通过编程方式创建画布的， canvas.width = '400px' var canvas = document.createElement('canvas')或类似的名称，则可以使用canvas.width = '400px'和canvas.height = '400px'来指定尺寸。 我将工作代码包含在下面的代码段中。

  var paddleHeight = 10; var paddleWidth = 75; var paddleX = (canvas.width - paddleWidth) / 2; var ctx = canvas.getContext('2d') function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.width - paddleWidth, paddleWidth, paddleHeight); ctx.fillStyle = "blue"; ctx.fill(); ctx.closePath(); } drawPaddle(); 

 <canvas id="canvas" width="400px" height="400px"/>