在通過JavaScript的Canvas中，如何將對象移動到其他坐標？

Question

我在這里有一個帶有控件的簡單“游戲”，還有一個重置按鈕，用於將繪制的圖像（笑臉）重置回中心。 我用一個空的圓圈試過了這段代碼，我可以通過按鈕將其移動而沒有任何問題。 我繼續裝飾圓圈，現在無法移動繪制的圖像。 任何反饋或解決方案將不勝感激。

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

Answer 1

請檢查以下代碼。 它類似於最后一個空圓圖，我剛剛包括了正確的位置計算，並且在適當的位置包括了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>

在通過JavaScript的Canvas中，如何將對象移動到其他坐標？

問題描述

1 個解決方案

解決方案1
1 已采納 2019-03-01 08:44:14

在通過JavaScript的Canvas中，如何將對象移動到其他坐標？

問題描述

1 個解決方案

解決方案1 1 已采納 2019-03-01 08:44:14

解決方案1
1 已采納 2019-03-01 08:44:14