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

Вход на сайт

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

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

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

Рекурсия присутствует?
И где эти прикрепленные файлы?
Я код на C++ набрал сам. Строил кривую Безье, но "прилипал" к нулю. То есть я задаю точки далеко от нуля, а он строил из нуля, а потом только обходил предложенные точки. Потом я нашёл Ваш сайт и эту статью. Оказалось, что я забыл возвести t в...
просто я не так понял, здесь мы вращаем точки куба что вращает сам куб. Мне нужно вращать просто 3д объект , данный способ не подходит
Задавайте объект в мировых координатах. Вращайте его относительно мировой системы координат. А при отрисовке преобразуйте в экранные координаты. Посмотрите пример преобразования в экранные координаты.

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

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

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

И на этом,пожалуй, можно закончить наш урок.Я надеюсь,для вас, дорогие пользователи эта информация будет полезной.