Пользование холстом (canvas) в Java Script происходит следующим образом:
Создаётмя холст. [1]
В скрипте создаётся переменная, значение холста к которой, присваетвается и переменная со значением параметра платформы (<!--Здесь комментарий для Html кода-->) [2-4]
Создётся код или вызываемая функция для рисовки [5-8]
- <canvas id="can" width="300px" <!--Высота--> height="300px" <!--Ширина--> display="block" <!--Задать как блок -->></canvas>
- <script language="javascript<wbr />">
- Var canvas = document.getElements<wbr />ById("can");
- Var ctx = canvas.getContext("2<wbr />d");
- ctx.beginPath(); <!--Начало рисования-->
- ctx.fillStyle = "red"; <!--Стиль объекта - красный цвет заливки-->
- ctx.fillRect(20,20,2<wbr />00,200); <!--Рисование прямоугольника в координатах от 20px по x и y до 200px по x и y-->
- ctx.closeRect(); <!--Конец рисования-->
Итог - красный прямоугольник
Удалять все рисунки с холста можно методом очистки:
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;
Итог - двигающийся квадратик при открытии страницы. Пример можете опробовать самостоятельно, пробуя различные вариации. Удачи!
