Javascript 如何制作画布形状的圆形？_Javascript_Html_Css_Canvas

Javascript 如何制作画布形状的圆形？

javascript html css canvas

Javascript 如何制作画布形状的圆形？,javascript,html,css,canvas,Javascript,Html,Css,Canvas,你好，我想知道如何在下面的代码中制作画布形状的圆圈。代码是关于使用键盘键移动对象的。我试着从这个盒子里画出一个圆圈，但它消失了，我不是很敏锐。可以帮助我在不影响代码的情况下创建这个画布循环吗抱歉，但我必须写更多的东西，因为这么说身体有所有的代码。。。我不知道现在该说什么（画画布圈）（画画布圈）（画画布圈） var canvas=document.getElementById（'myCanvas'）； var context=canvas.getContext（'2d'）； var cent

你好，我想知道如何在下面的代码中制作画布形状的圆圈。代码是关于使用键盘键移动对象的。我试着从这个盒子里画出一个圆圈，但它消失了，我不是很敏锐。可以帮助我在不影响代码的情况下创建这个画布循环吗

抱歉，但我必须写更多的东西，因为这么说身体有所有的代码。。。我不知道现在该说什么（画画布圈）（画画布圈）（画画布圈）


var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
让圆=新路径2D（）；// 我将圆圈
代码移动到drawstuff
函数中，因为它必须在该函数中运行，并且删除了fillRect
的使用
您可以在此处看到结果：

（函数（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
//事件侦听器
window.addEventListener（“keydown”，onKeyDown，false）；
window.addEventListener（“keyup”，onKeyUp，false）；
函数onKeyDown（事件）{
var keyCode=event.keyCode；
开关（钥匙代码）{
案例68://d
keyD=真；
打破
案例83://s
keyS=true；
打破
案例65://a
keyA=真；
打破
案例87://w
keyW=真；
打破
}
}
函数onKeyUp（事件）{
var keyCode=event.keyCode；
开关（钥匙代码）{
案例68://d
keyD=假；
打破
案例83://s
keyS=false；
打破
案例65://a
keyA=假；
打破
案例87://w
keyW=假；
打破
}
}
//必要变量
var tickX=10；
var tickY=10；
var-keyW=false；
var-keyA=false；
var-keyS=false；
var-keyD=false；
//主要动画功能
函数drawStuff（）{
window.requestAnimationFrame（drawStuff）；
var canvas=document.getElementById（“myCanvas”）；
var c=canvas.getContext（“2d”）；
c、 clearRect（0,0,200,200）；
让圆=新路径2D（）HTML的顺序可能是问题。考虑回复编辑吗？呃，我不理解ASHU。脚本在HTML和正文元素之外。考虑在关闭正文标签<代码> >代码>之前移动它。你问一个圆，但是<代码>拖拽< /代码>函数绘制一个正方形。你做了一个方块吗？你从其他地方检索到的代码网格？我真的不明白这应该做什么。嗯，是的，这不是我的代码。我和我的朋友正在做一个项目，我编辑了一些想法。我没有做到。你能帮我编辑它并使它圆，但idk我遗漏了一些东西吗？先生，实际上我想转换正方形进入圆圈。我知道代码中有函数使其成为正方形，但当我试图编辑时…我把整个代码弄乱了好的，更新了答案
<!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>