使用Canvas时圆圈不显示

Question

这是Udemy课程的代码。我不明白为什么圈子没有出现在我面前。教师使用相同的代码会产生一个圆圈。

矩形对我来说很好。

var canvas, canvasContext;
console.log("text from script");
window.onload = function() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');

  canvasContext.fillStyle = "red";
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);

  // cavasContext.fillStyle="white";
  // canvasContext.beginPath();
  // canvasContext.arc(100,100,10,0,Math.PI*2,true);

  cavasContext.beginPath();
  cavasContext.arc(100, 75, 50, 0, 2 * Math.PI);
  cavasContext.stroke();
}

<canvas id="gameCanvas" width="800" height="600"></canvas>

Answer 1

有一个拼写错误，你拼写了canvasContext错误，错过了一个“n”。

cavasContext.beginPath();
cavasContext.arc(100,75,50,0,2*Math.PI);
cavasContext.stroke();

应该是：

canvasContext.beginPath();
canvasContext.arc(100,75,50,0,2*Math.PI);
canvasContext.stroke();