в Canvas через JavaScript, как я могу получить ординаты объекта и затем переместить этот объект в другую координату? - PullRequest
Новая
       1

в Canvas через JavaScript, как я могу получить ординаты объекта и затем переместить этот объект в другую координату?

0 голосов
/ 28 февраля 2019

Я пытаюсь переместить круг, нажимая «вверх», «вниз», «влево», «вправо», и «сброс» - вернуть круг обратно в центр.Ниже то, что я имею до сих пор.Поскольку я новичок в этом, любые отзывы об улучшении моего кода будут с благодарностью.

<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">
<body>
<button id="reset">Reset</button></br>
<canvas id="myCanvas" width="200" height="100" 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>
    window.onload = function myCircle() {
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function up() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,30,40,0,2*Math.PI);
    ctx.stroke();
    }
    function down() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,-30,40,0,2*Math.PI);
    ctx.stroke();
    }    
    function left() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(85,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function right() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(105,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function reset() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(85,30,40,0,2*Math.PI);
    ctx.stroke();
    }
    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>

Я должен также упомянуть, что я пытался использовать метод ctx.clearRect, но он также не работал.Моя конечная цель - попытаться использовать Canvas / JavaScript для перемещения окружности от исходной координаты к новой координате с помощью кнопок.

1 Ответ

0 голосов
/ 28 февраля 2019

Вы можете достичь этого с помощью следующего кода: 

let c, ctx, pos, centre = { x: 95, y: 50 }

window.onload = function(){
  c = document.getElementById("myCanvas");
  ctx = c.getContext("2d");
  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, 200,100);
}

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

function up() {
  pos.top-= 20; // Here you adjust the amount to move
  draw();
}

function down() {
  pos.top+= 20; // Here you adjust the amount to move
  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="200" height="100" 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...