Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.
Добавление к программе строки glutReshapeFunc(changeSize); приводит к тому, что треугольник перестаёт совсем отрисовываться.
Выдаёт ошибку glut32.dll не найден! При том, что он лежит в System32! Всё решил) Нужно отправить не в System32, а в System.

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
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();
  }
}

Результат этого ниже:


Цвета, стили и тени
Свойство Описание
fillStyle Задание или возврат цвета, градиента или узора, используемого для заполнения чертежа
strokeStyle Задание или возврат цвета, градиента или узора, используемого для штрихов
shadowColor Задает или возвращает цвет, используемый для теней
shadowBlur Устанавливает или возвращает уровень размытия для теней
shadowOffsetX Задание или возврат горизонтального расстояния тени от фигуры
shadowOffsetY Задание или возврат вертикального расстояния тени от фигуры

 

Метод Описание
createLinearGradient() Создание линейного градиента (для использования в содержимом холста)
createPattern() Повторяет указанный элемент в указанном направлении
createRadialGradient() Создание радиального/кругового градиента (для использования в содержимом холста)
addColorStop() Задает цвета и позиции остановки в объекте градиента


Стили линий
Свойство Описание
lineCap Задание или возврат стиля концевых колпачков для линии
lineJoin Задает или возвращает тип создаваемого угла, когда две линии встречаются
lineWidth Задает или возвращает текущую ширину строки
miterLimit Задает или возвращает максимальную длину среза

 

Прямоугольники
Метод Описание
rect() Создание прямоугольника
fillRect() Рисует "заполненный" прямоугольник
strokeRect() Рисует прямоугольник (без заливки)
clearRect() Очищает заданные пикселы в пределах заданного прямоугольника

 

Пути
Метод Описание
fill() Заполняет текущий чертеж (путь)
stroke() На самом деле рисует путь, который вы определили
beginPath() Начало пути или сброс текущего пути
moveTo() Перемещение контура в указанную точку на холсте без создания линии
closePath() Создание контура от текущей точки до начальной точки
lineTo() Добавляет новую точку и создает линию от этой точки до последней указанной точки на холсте
clip() Обрезает область любой формы и размера из исходного полотна
quadraticCurveTo() Создание квадратичной кривой Безье
bezierCurveTo() Создание кубической кривой Безье
arc() Создание дуги/кривой (используется для создания окружностей или частей окружностей)
arcTo() Создание дуги/кривой между двумя касательными
isPointInPath() Возвращает значение true, если указанная точка находится в текущем пути, в противном случае false

 

Преобразования
Метод Описание
scale() Масштабирование текущего чертежа больше или меньше
rotate() Поворот текущего чертежа
translate() Пересопоставление позиции (0,0) на холсте
transform() Заменяет текущую матрицу преобразования для чертежа
setTransform() Сбрасывает текущее преобразование в матрицу удостоверения. Затем запускает преобразовать ()

 

Текст
Свойство Описание
font Задает или возвращает текущие свойства шрифта для текстового содержимого
textAlign Задает или возвращает текущую трассу для текстового содержимого
textBaseline Задает или возвращает текущую базовую линию текста, используемую при рисовании текста

 

Метод Описание
fillText() Рисует "заполненный" текст на холсте
strokeText() Рисует текст на холсте (без заливки)
measureText() Возвращает объект, содержащий ширину заданного текста

 

Рисунок
Метод Описание
drawImage() Рисует изображение, холст или видео на холсте

 

Манипулирование пикселями
Свойство Описание
width Возвращает ширину объекта ImageData
height Возвращает высоту объекта ImageData
data Возвращает объект, содержащий данные изображения заданного объекта ImageData

 

Метод Описание
createImageData() Создает новый пустой объект ImageData
getImageData() Возвращает объект ImageData, который копирует пиксельные данные для заданного прямоугольника на холсте
putImageData() Помещает данные изображения (из заданного объекта ImageData) обратно на холст

 

Композиции
Свойство Описание
globalAlpha Задание или возврат текущего значения альфа-канала или прозрачности чертежа
globalCompositeOperation Задает или возвращает способ рисования нового изображения на существующем изображении

Онлайн-среда: https://html5css.ru/edithtm/index.php

Пример:

<!DOCTYPE html>
<html>
<body>
 
<h3>A demonstration of how to access a CANVAS element</h3>
 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
 
<p>Click the button to draw on the canvas.</p>
 
<button onclick="myFunction()">Try it</button>
 
<script>
function myFunction() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);
}
</script>
 
</body>
</html>