如何制作画布形状的圆形？答案

【问题标题】：How to make canvas shape circle?如何制作画布形状的圆形？
【发布时间】：2021-01-05 19:25:28
【问题描述】：

您好，我想知道如何在下面的代码中使画布形状为圆形。该代码是关于使用键盘键移动对象的。我试图从这个盒子里画出圆圈，但它就消失了，我也不是很敏锐。有人可以帮我在不影响代码的情况下制作这个画布圈吗？

对不起，但我必须写更多的东西，因为 SO 说 body 有所有代码...我现在不知道该说什么（画布圈）（画布圈）（画布圈）

<!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>

【问题讨论】：

@Rajesh - 修复了 OP 给出的示例。 HTML 顺序可能是问题所在。考虑恢复编辑？
呃我不明白
Yashu - 脚本在 HTML 和 BODY 元素之外。考虑将它移到结束正文标记 </body>? 之前
你问的是一个圆，但drawStuff 函数画的是一个正方形。您是否制作了从其他地方检索到的代码网格？我真的不明白这应该做什么。
好吧，这不是我的代码，我和我的朋友正在做一个项目，我正在编辑其中的一些想法。我没有成功。你能帮我把它编辑成圆形，但我错过了一些东西

标签： javascript html css canvas

【解决方案1】：

我将circle 代码移到了drawstuff 函数中，因为它必须在该函数中运行，并删除了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>

【讨论】：

哦，先生，实际上我想将正方形转换为圆形。我知道代码中有使它成为正方形的功能，但是当我尝试编辑时...我弄乱了整个代码