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

Вход на сайт

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

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

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

Пример, к которому вы оставили комментарий строит именно то самое изображение на языке с#, которое вам необходимо. Отличается только цветовая палитра.
Добрый день! Уже и не знаю куда обратиться. Нужно построить фрактал Жулиа на языке программирования C#. Что бы получилось данное изображение
Необходимо дополнение, как все это запустить, Где писать все эти команды, чтобы видеть результат. Я имею ввиду, что необходимо продемонстрировать полный код HTML-страницы со скриптом и тегами холста. Может даже сделать Урок 0 "Как начать рисовать в...
КРУГОВОЙ ФРАКТАЛ -ОШИБОЧНАЯ ПРОГРАММА! ПАПА ЗибЕрт
Можешь обяснить подробно что как работает, и почему массу не задаем

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

Яндекс.Метрика Рейтинг@Mail.ru
Среда программирования: 
HTML 5 + JavaScript
Что такое jCanvas?

Официальный сайт библиотеки разъясняет: «jCanvas – JavaScript библиотека, написанная на JQuery и для JQuery, которая вобрала в себя HTML5 canvas API и добавляет множестве новых функций и возможностей, большинство из которых настраиваемые. Среди возможностей есть слои, события, drag-and-drop, анимация и еще много чего. В результате получилось гибкое API, завернутое в JQuery синтаксис, облегчающее и усиливающее HTML5 canvas.»

Как добавить jCanvas в свой проект

Чтобы добавить jCanvas в свой проект, необходимо загрузить скрипт с официального сайта и разместить его в папке проекта. Выше уже упоминалось, что jCanvas требуется библиотека JQuery, так что не забудьте ее также скачать. Скрипты вашего проекта будут выглядеть так:

<script src="jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
<script src="js.js"></script> 

Настройка HTML документа

Сначала добавим тег canvas в стандартный HTML5 документ.

<canvas id="myCanvas" width="600" height="300"></canvas>

В коде выше стоит обратить внимание на пару вещей:

  1. По умолчанию разрешение поверхности, на которой можно рисовать у тега canvas составляет 300px на 150px. Изменить данные значения можно в атрибутах width и height в разметке.
  2. Атрибут с идентификатором не обязателен. Просто с его помощью легче получить доступ к элементу через JS.
  3. Внутри тега canvas находится обычное растровое изображение, и оно не доступно для пользователей с ограниченными возможностями. Также браузер без поддержки Canvas API не сможет получить доступ к контенту внутри тега и каким-либо образом с ним взаимодействовать.
Общий Вид страницы будет иметь такой вид

<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>JCanvas</title>    
    <script src="jquery.js"></script>
    <script src="jcanvas.min.js"></script>  
    <script src="js.js"></script> 
</head>
 
<body>
    <canvas id="myCanvas" width="600" height="300"></canvas>  
</body>
 
</html>

Как рисовать простые формы с помощью jCanvas

Большинство методов jCanvas принимает пару свойство/значение, данные пары можно располагать в любом порядке. Давайте нарисуем прямоугольник.

Прямоугольник

Ниже показан код для того, чтобы нарисовать прямоугольник. Используется метод drawRect() объекта jCanvas.

// сохраняем объект jCanvas в переменную
var $myCanvas = $('#myCanvas');
 
// сам прямоугольник 
$myCanvas.drawRect({
  fillStyle: 'steelblue',
  strokeStyle: 'blue',
  strokeWidth: 4,
  x: 150, y: 100,
  fromCenter: false,
  width: 200,
  height: 100
});

В коде выше в переменную $myCanvas заносится объект jCanvas. Свойства внутри метода drawRect() говорят сами за себя, но все же давайте разберем, что они означают:

  • fillStyle отвечает за фоновый цвет прямоугольника
  • strokeStyle отвечает за цвет рамки;
  • strokeWidth отвечает за ширину рамки;
  • x и y устанавливают координаты прямоугольника по горизонтальной и вертикальной оси. Значение 0 для Х и 0 для У (0, 0) это левый верхний угол нашего холста. Координата Х двигает фигуру вправо, а У – вниз. По умолчанию в jCanvas координаты Х и У ведут отсчет от центра прямоугольника.
  • — Чтобы точкой отсчета у фигуры стал левый верхний угол, необходимо задать свойству fromCenter значение false.
  • — Ну а width и height это высота и ширина фигуры.

Как рисовать линии и пути

Линии можно рисовать с помощью свойства drawLine(), задав пары точек для построения.

$myCanvas.drawLine({
  strokeStyle: 'steelblue',
  strokeWidth: 10,
  rounded: true,
  closed: true,
  x1: 100, y1: 28,
  x2: 50, y2: 200,
  x3: 300, y3: 200,
  x4: 200, y4: 109
});

Свойство rounded отвечает за скругленные углы, а свойство closed за замкнутость фигуры.

Результат который мы увидим

Все фигуры которые доступны в JCanvas
(Сcылки указаны на документацию официального сайта, там же есть своя песочница в которой можно посмотреть результат компиляции кода)

Arcs
Arrows
Curves
Ellipses
Images
Lines
Masking
Paths
Polygons
Rectangles
Slices
Text
Vectors

Манипулирование слоями

Используя метод setLayer (), вы можете установить свойства слоя. Аргументы метода включают:

1. Name или индекс слоя или сам слой. (Имя должны быть уникальным, для каждого объекта)
2. Объект свойств для установки.

Обратите внимание, что этот метод не автоматически перерисовывает холст.

Приведем пример использования:

     var $myCanvas = $('#myCanvas')
 
     $('canvas').drawArc({
        name: 'red_ellipse',
        layer: true,
        groups: ['circle'],
        fromCenter: false,
        x: 0, y: 0,
        radius: 45
    }).drawArc({
        name: 'yell_ellipse',
        layer: true,
        groups: ['circle'],
        fromCenter: false,
        x: 90, y: 0,
        radius: 45
    }).drawArc({
        name: 'green_ellipse',
        layer: true,
        groups: ['circle'],
        fromCenter: false,
        x: 180, y: 0,
        radius: 45
    });
 
    $('canvas').setLayer('red_ellipse', {
        fillStyle: '#fe0000',
    })
    .setLayer('yell_ellipse', {
        fillStyle: '#ffd71a',
    })
    .setLayer('green_ellipse', {
        fillStyle: '#6bf90c',
    })
    .drawLayers();

Вот что мы увидим когда запустим наш html документ:

Как вы могли заметить для каждого объекта, так же присвоено свойство groups: ['название'], благодаря этому, мы можем использовать метод setLayerGroup() который будет задавать параметры для всех элементов входящюю в группу.

Приведем пример ( для всех объектов с относящихся к группе "circle" реализуем сдвиг по y)

   var $myCanvas = $('#myCanvas')
 
   $('canvas').drawArc({
        name: 'red_ellipse',
        layer: true,
        groups: ['circle'],
        fromCenter: false,
        x: 0, y: 0,
        radius: 45
    }).drawArc({
        name: 'yell_ellipse',
        layer: true,
        groups: ['circle'],
        fromCenter: false,
        x: 90, y: 0,
        radius: 45
    }).drawArc({
        name: 'green_ellipse',
        layer: true,
        groups: ['circle'],
        fromCenter: false,
        x: 180, y: 0,
        radius: 45
    });
 
 
    $('canvas').setLayer('red_ellipse', {
        fillStyle: '#fe0000',
    })
    .setLayer('yell_ellipse', {
        fillStyle: '#ffd71a',
    })
    .setLayer('green_ellipse', {
        fillStyle: '#6bf90c',
    })
    .drawLayers();
 
 
    $('canvas').setLayerGroup('circle', {
        y: 25
    })
    .drawLayers();

Результат:

Вы возможно заметили, что свойства у наших объектов совпадают, оптимизируем наш код с помощью Jquery и знаний полученных выше. (Это не единственный вариант, более эффективным методом, в данном случае, это задать все общие параметры нашей группе, но мне хочется показать метод который пригодиться Вам в будущем)

    var $myCanvas = $('#myCanvas')
 
    for (var i=1; i<=3; i++) {
 
         $myCanvas.drawArc({
            name: 'ellipse_' + i,
            groups: ['circle'],
            layer: true,
            fromCenter: false,
            x: 0, 
            radius: 45
        })   
    };
 
    $('canvas').setLayer('ellipse_1', {
        fillStyle: '#fe0000',
    })
    .setLayer('ellipse_2', {
        fillStyle: '#ffd71a',
        x: 90
    })
    .setLayer('ellipse_3', {
        fillStyle: '#6bf90c',
        x: 180
    })
    .drawLayers();
 
    $('canvas').setLayerGroup('circle', {
        y: 25
    })
    .drawLayers();

Результат остался неизменным:

Заключение:
Данная библиотека, является легкой для изучения, особенно для людей которые до этого были знакомы с Jquery. Единственным минусом является то, что библиотека была выпущена совсем недавно из за этого по ней мало литературы. Основным источником информации является официальный сайт.

Так как это был вводный урок, прикрепляю простенькую работу, со скаченными библиотеками и настроенными путями.

Прикрепленный файлРазмер
Jcanvas Example.rar40.32 кб