Среда программирования:
HTML 5 + JavaScript
В этом уроке будем учиться отрисовывать графические примитивов при помощи <canvas>.
В данном уроке подразумевается что обучающийся знаком с HTML5 и JavaScript.
Для начала нам нужно задать шаблон HTML страницы :
<html> <head> <script src="js.js"></script>//Подключение JS </head> <body > </body> </html>
Следующим шагом необходимо создать сам холст
добавляем тег <canvas> в <body>, а также добавим событие onload в тег body и передадим название функции,которую будем загружать
<html> <head> <script src="js.js"></script>//Подключение JS </head> <body onload="draw();">//запуск при загрузке функции draw <canvas id="canvas" width="150" height="150"></canvas>//задание холста </body> </html>
Далее переходим в js.js и пишем ниже приведенный код в этот файл
Готово!Холст отрисован.Теперь можно перейти к отрисовке графических примитивов.
Пожалуй, для начала стоит начать с отрисовки простой линии.
1.Отрисовка линии
Для отрисовки линии нам понадобятся такие встроенные функции как:
moveTo(x, y) // перемещает "курсор" в позицию x, y и делает её текущей lineTo(x, y) // ведёт линию из текущей позиции в указанную, и делает в последствии указанную текущей
задаем изначальные координаты точки откуда будет идти линия
ctx.beginPath();//начинает запись пути ctx.moveTo(125,125);//задание начальной точки ctx.lineTo(125,45);//линия ctx.lineTo(45,125);//линия ctx.closePath();//конец пути ctx.stroke();//определение отрисовки пути
Пример:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // залитый треугольник ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); // пустой треугольник ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke(); } }
Выглядит это так:
2.Отрисовка прямоугольников
Для того чтобы отрисовать прямоугольник нам потребуются функции:
fillRect(x, y, width, height)//Рисование заполненного прямоугольника. strokeRect(x, y, width, height)//Рисование прямоугольного контура. clearRect(x, y, width, height)//Очистка прямоугольной области, делая содержимое совершенно прозрачным.
Пример:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } }
Выглядит это вот так:
3.Дуги
Для отрисовки дуг мы будим использовать такие функции как:
arc(x, y, radius, startAngle, endAngle, anticlockwise)//Рисуем дугу с центром в точке (x,y) радиусом r, начиная с угла startAngle и заканчивая в endAngle в направлении против часовой стрелки anticlockwise (по умолчанию по ходу движения часовой стрелки). arcTo(x1, y1, x2, y2, radius)//Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.
Пример:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); for(var i=0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x = 25+j*50; // x координата var y = 25+i*50; // y координата var radius = 20; // радиус var startAngle = 0; // стартовая точка отрисовки var endAngle = Math.PI+(Math.PI*j)/2; // конечная точка отрисовки var anticlockwise = i%2==0 ? false : true; // Направление (по часовой или против часовой стрелки) ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } } } }
отображается в браузере это так:
4.Передвижение пера
Одна очень полезная функция, которая ничего не рисует, но связана по смыслу с вышеописанными функциями - это moveTo(). Вы можете представить это как отрыв (подъем) пера от бумаги и его перемещение в другое место.
moveTo(x, y)//moveTo(x, y) Перемещает перо в точку с координатами x и y.
При инициализации canvas или при вызове beginPath(), вы захотите использовать функцию moveTo() для перемещения в точку начала рисования. Можно использовать moveTo() и для рисования несвязанного(незакрытого) контура. Посмотрите на смайлик ниже.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Внешняя окружность ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // рот (по часовой стрелке) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Левый глаз ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Правый глаз ctx.stroke(); } }
Результат этого ниже:
И на этом,пожалуй, можно закончить наш урок.Я надеюсь,для вас, дорогие пользователи эта информация будет полезной.