时间戳

首页 > 解决方案 > 在通过 JavaScript 的 Canvas 中，如何将对象移动到不同的坐标？

javascript - 在通过 JavaScript 的 Canvas 中，如何将对象移动到不同的坐标？

问题描述

我在这里有一个带有控件的简单“游戏”，以及用于将绘制的图像（笑脸）重置回中心的重置按钮。我已经用这个空圆圈尝试了这段代码，我可以通过按钮移动它而没有任何问题。我开始装饰圆圈，现在我无法移动绘制的图像。任何反馈或解决方案将不胜感激。

<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">
<body>
<button id="reset">Reset</button></br>
<canvas id="myCanvas" width="250" height="250" style="border:1px solid#000000;"></canvas></br>
<button id="left">Left</button>
<button id="up">Up</button>
<button id="down">Down</button>
<button id="right">Right</button>
<script>
    let c, ctx, pos, centre = { x: 95, y: 50 }
    window.onload = function drawSmile(){
      let c = document.getElementById("myCanvas");
      let ctx = c.getContext("2d");
      let centerX = c.width / 2;
      let centerY = c.height / 2;
      let radius = 70;
      let eyeRadius = 10;
      let eyeXOffset = 25;
      let eyeYOffset = 20;

      // draw the yellow circle
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'yellow';
      ctx.fill();
      ctx.lineWidth = 5;
      ctx.strokeStyle = 'black';
      ctx.stroke();

      // draw the eyes
      ctx.beginPath();
      var eyeX = centerX - eyeXOffset;
      var eyeY = centerY - eyeXOffset;
      ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
      var eyeX = centerX + eyeXOffset;
      ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'black';
      ctx.fill();

      // draw the mouth
      ctx.beginPath();
      ctx.arc(centerX, centerY, 50, 0, Math.PI, false);
      ctx.stroke();
      reset();
    }

    function draw(){
      clear();
      ctx.beginPath();
      ctx.arc(centre.x + pos.left, centre.y + pos.top, 40, 0, 2*Math.PI);
      ctx.stroke();
    }

    function clear(){
      ctx.clearRect(0, 0, 2000, 1000);
    } 

    function reset() {
      pos = { left: 0, top: 0 }
      draw();
    }

    function up() {
    ctx.clearRect(0, 0, 2000, 1000);
      pos.top-= 20;
      draw();
    }

    function down() {
      pos.top+= 20;
      draw();
    }

    function left() {  
      pos.left-= 20;
      draw();
    }

    function right() {
      pos.left+= 20;
      draw();
    }

document.getElementById("reset").onclick = reset;
document.getElementById("up").onclick = up;
document.getElementById("down").onclick = down;
document.getElementById("left").onclick = left;
document.getElementById("right").onclick = right;
</script>
</body>
</html>

标签： javascripthtmlcanvas

解决方案

请检查以下代码。和上次画的空圆类似，我只是把正确的位置计算包括在内，并closePath()在适当的地方包括了方法。

let c
, ctx
, pos
, centerX
, centerY
, radius
, eyeRadius
, eyeXOffset
, eyeYOffset

window.onload = function() {
  c = document.getElementById("myCanvas");
  ctx = c.getContext("2d");
  centerX = c.width / 2;
  centerY = c.height / 2;
  
  radius = 70;
  eyeRadius = 10;
  eyeXOffset = 25;
  eyeYOffset = 20;
  
  reset();
}

function drawFace(){
  // Draw the yellow circle
  ctx.beginPath();
  ctx.arc(centerX + pos.left, centerY + pos.top, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'yellow';
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.strokeStyle = 'black';
  ctx.stroke();
  ctx.closePath();
}

function drawEyes(){
  // Draw the eyes
  var eyeX = centerX + pos.left - eyeXOffset;
  var eyeY = centerY + pos.top - eyeYOffset;
  ctx.beginPath();
  ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.closePath();
  
  ctx.beginPath();
  eyeX = centerX + pos.left + eyeXOffset;
  ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.closePath();
}

function drawMouth(){
  // Draw the mouth
  ctx.beginPath();
  ctx.arc(centerX + pos.left, centerY + pos.top, 50, 0, Math.PI, false);
  ctx.stroke();
  ctx.closePath();
}

function draw() {
  clear();
  drawFace();
  drawEyes();
  drawMouth();
}

function clear() {
  ctx.clearRect(0, 0, c.width, c.height);
}

function reset() {
  pos = {
    left: 0,
    top: 0
  }
  draw();
}

function up() {
  pos.top -= 20;
  draw();
}

function down() {
  pos.top += 20;
  draw();
}

function left() {
  pos.left -= 20;
  draw();
}

function right() {
  pos.left += 20;
  draw();
}

document.getElementById("reset").onclick = reset;
document.getElementById("up").onclick = up;
document.getElementById("down").onclick = down;
document.getElementById("left").onclick = left;
document.getElementById("right").onclick = right;
<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">

<body>
  <button id="reset">Reset</button><br>
  <canvas id="myCanvas" width="250" height="250" style="border:1px solid#000000;"></canvas><br>
  <button id="left">Left</button>
  <button id="up">Up</button>
  <button id="down">Down</button>
  <button id="right">Right</button>
</body>

</html>

推荐阅读