如何制作 canvas 形狀的圓？

Question

您好我想知道如何在下面的代碼中制作 canvas 形狀的圓圈。 該代碼是關於使用鍵盤鍵移動 object。 我試圖從這個盒子里畫出圓圈，但它就消失了，我也不是很敏銳。 有人可以幫我制作這個 canvas 圓圈而不影響代碼。

對不起，但我必須寫更多的東西，因為 SO 說身體有所有代碼......我現在不知道該說什么（制作 canvas 圓圈）（制作 canvas 圓圈）（制作 canvas 圓圈）

<!DOCTYPE html>
<html>
<head></head>
<body>
  <canvas id="myCanvas" width='800' height='800' border-radius= ></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

let circle = new Path2D();  // <<< Declaration
circle.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightblue';
context.fill(circle); //   <<< pass circle to context

context.lineWidth = 10;
context.strokeStyle = '#000066';
context.stroke(circle); 




(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

//event listener
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event) {
  var keyCode = event.keyCode;
  switch (keyCode) {
    case 68: //d
      keyD = true;
      break;
    case 83: //s
      keyS = true;
      break;
    case 65: //a
      keyA = true;
      break;
    case 87: //w
      keyW = true;
      break;
  }
}

function onKeyUp(event) {
  var keyCode = event.keyCode;

  switch (keyCode) {
    case 68: //d
      keyD = false;
      break;
    case 83: //s
      keyS = false;
      break;
    case 65: //a
      keyA = false;
      break;
    case 87: //w
      keyW = false;
      break;
  }
}

//neccessary variables
var tickX = 10;
var tickY = 10;

var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;

//main animation function
function drawStuff() {
  window.requestAnimationFrame(drawStuff);
  var canvas = document.getElementById("myCanvas");
  var c = canvas.getContext("2d");

  c.clearRect(0, 0, 800, 800);
  c.fillStyle = "lightblue";
  c.fillRect(tickX, tickY, 100, 100);

  if (keyD == true) {
    tickX += 1;
  }
  if (keyS == true) {
    tickY += 1;
  }
  if (keyA == true) {
    tickX--;
  }
  if (keyW == true) {
    tickY--;
  }
}
window.requestAnimationFrame(drawStuff);
</script>

Answer 1

我將circle代碼移動到drawstuff function 中，因為這是它必須運行的地方，並刪除了fillRect的使用。

你可以在這里看到結果：

 (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); //event listener window.addEventListener("keydown", onKeyDown, false); window.addEventListener("keyup", onKeyUp, false); function onKeyDown(event) { var keyCode = event.keyCode; switch (keyCode) { case 68: //d keyD = true; break; case 83: //s keyS = true; break; case 65: //a keyA = true; break; case 87: //w keyW = true; break; } } function onKeyUp(event) { var keyCode = event.keyCode; switch (keyCode) { case 68: //d keyD = false; break; case 83: //s keyS = false; break; case 65: //a keyA = false; break; case 87: //w keyW = false; break; } } //neccessary variables var tickX = 10; var tickY = 10; var keyW = false; var keyA = false; var keyS = false; var keyD = false; //main animation function function drawStuff() { window.requestAnimationFrame(drawStuff); var canvas = document.getElementById("myCanvas"); var c = canvas.getContext("2d"); c.clearRect(0, 0, 200, 200); let circle = new Path2D(); // <<< Declaration circle.arc(100 + tickX, 100 + tickY, 70, 0, 2 * Math.PI, false); c.fillStyle = 'purple'; c.fill(circle); // <<< pass circle to context c.lineWidth = 10; c.strokeStyle = '#000066'; c.stroke(circle); if (keyD == true) { tickX += 1; } if (keyS == true) { tickY += 1; } if (keyA == true) { tickX--; } if (keyW == true) { tickY--; } } window.requestAnimationFrame(drawStuff);

 Focus this area, then use keys <b>d, s, a, w</b><br /> <canvas id="myCanvas" width='200' height='200' style="border: 1px solid #f4f4f4" ></canvas>

如何制作 canvas 形狀的圓？

問題描述

1 個解決方案

解決方案1
0 已采納 2021-01-05 11:07:45

如何制作 canvas 形狀的圓？

問題描述

1 個解決方案

解決方案1 0 已采納 2021-01-05 11:07:45

解決方案1
0 已采納 2021-01-05 11:07:45