Как пользоваться холстом (canvas) в Java Script?

В языке разметок HTML есть холст (canvas), на котором можно рисовать различные фигуры через Java Script.

•Как пользоваться данным холстом?

•Как удалять рисунки?

•Как делать анимации с его помощью?

тэги:

java script,

программирование

категория:

компьютеры и интернет

ответить

комментировать

в избранное

бонус

1 ответ:

старые выше
новые выше
по рейтингу

1

MrAno­nim
[114]

1 день назад

Пользование холстом (canvas) в Java Script происходит следующим образом:

Создаётмя холст. [1]

В скрипте создаётся переменная, значение холста к которой, присваетвается и переменная со значением параметра платформы (<!—Здесь комментарий для Html кода—>) [2-4]

Создётся код или вызываемая функция для рисовки [5-8]

Итог — красный прямоугольник

Удалять все рисунки с холста можно методом очистки:

canvas.clearRect(0, 0, canvas.width, canvas.height);

Анимация создаётся посредством введения перерисовывания с подключением интервала (заключаем рисование на холсте [5-8], а так же очистку в функцию и запускаем запуск через итервал setInterval(/*имя функции*/, /*время интервала в милисекундах*/);), а после изменяем рисование по пикселям следующим способом:

Вместо координатов в строке [7] указываем сумму размера с наименованием переменной, отвечающей за координат:

Var x = 20, y = 20; <!—не входят в функцию рисования!—>

ctx.fillRect(x, y, x+180, y+180);

И добавляем переменные для смещения, указывая необходимое изменение координатов с каждым шагом интервала:

Var dx = 1, dy = 1; <!—Так же вне функции рисования—>

x += dx; <!—А эти добавляем!—>

y += dy;

Итог — двигающийся квадратик при открытии страницы. Пример можете опробовать самостоятельно, пробуя различные вариации. Удачи!

комментировать

в избранное

ссылка

отблагодарить