Отрисовка элементов <canvas> на чистом JavaScript 5. Март 2018 - 8:14 | Юрий Юрий Среда программирования: HTML 5 + JavaScript В этом уроке будем учиться отрисовывать графические примитивов при помощи при использовании В данном уроке подразумевается что обучающийся знаком с HTML5 и JavaScript. Для начала нам нужно задать шаблон HTML страницы : <html> <head> <script src="js.js"></script>//Подключение JS </head> <body > </body> </html> Следующим шагом необходимо создать сам холст добавляем тег в , а также добавим событие 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(); } } Результат этого ниже: И на этом,пожалуй, можно закончить наш урок.Я надеюсь,для вас, дорогие пользователи эта информация будет полезной.
