0

Хотел сделать на jsfiddle фидл, в котором рисуется квадрат каждый раз меняя свое направление. Но мне не очень нравится его поведение:

  • Он постоянно меняет свои размеры
  • Движется почти на одном месте

ссылка: http://jsfiddle.net/Rony_04/s2ukad90/35/

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");


var width = 10;
var height = 10;
var x = 300;
var y = 200;
var step = 5;
/*
var dimensions = [
    'right',
  'left',
  'up',
  'down'
]
*/
var dimension;

ctx.fillStyle = "Blue";

setInterval(function () {
    dimension = Math.floor(Math.random() * 4);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  switch (dimension) {
    case 0: 
        x += step;
        ctx.fillRect(x, y, x + width, y + height);
      break;
    case 1:
        x -= step;
      ctx.fillRect(x, y, x + width, y + height);
      break;
    case 2:
        y -= step;
      ctx.fillRect(x, y, x + width, y + height);
      break;
    case 3:
        y += step;
      ctx.fillRect(x, y, x + width, y + height);
      break;
  }

    position += step;
}, 60);
4
  • 1
    Ну правильно, вы же каждый раз даете ему новые размеры, сами же пишите ctx.fillRect(x, y, x + width, y + height);, а x при этом меняете x += step;. Какого поведения вы ожидали?)) 13 сен 2018 в 7:39
  • @StepanKasyanenko но ведь 3-м и 4-м параметром указываются координаты правого нижнего угла или я неправ?
    – wan140
    14 сен 2018 в 6:51
  • Нет, не правы. 3 и 4 аргументы - это ширина и высота. w3schools.com/tags/canvas_fillrect.asp 14 сен 2018 в 6:54
  • Спасибо забыл )
    – wan140
    14 сен 2018 в 6:55

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.