Задать вопрос

Ди Ма

Ответы пользователя по тегу Canvas

  • Canvas, как сделать реалистичный календарь?

    @dimentimor 
    // Берем начало месяца, смотрим, какой день.
var date = new Date(2018, 3, 1); // 1 апреля 2018
var day = date.toLocaleString('ru', { weekday: 'short' }); // вс

// Создаем массив, наполняем его числами от 1 до {количество дней в месяце}
// "вс" по счету седьмой день, так что добавляем 6 нулей в начало массива
var num = 1;
var arr = [...Array(6)].map(() => 0).concat([...Array(30)].map(() => num++));

// Делим получившийся массив на подмассивы (по 7 элементов)
var res = [];
for (var i = 0; i < Math.ceil(arr.length / 7); i++) {
	res[i] = arr.slice((i * 7), (i * 7) + 7);
}

// Получаем матрицу. Выравниваем, что бы удобней отрисовывать
if (res[res.length -1].length < 6) {
	res[res.length -1].push(...[...Array(7 - res[res.length -1].length)].map(() => 0));
} 

//  При отрисовке нули игнорируем
console.log(res);

/*[ 
  	[ 0, 0, 0, 0, 0, 0, 1 ],
  	[ 2, 3, 4, 5, 6, 7, 8 ],
  	[ 9, 10, 11, 12, 13, 14, 15 ],
  	[ 16, 17, 18, 19, 20, 21, 22 ],
  	[ 23, 24, 25, 26, 27, 28, 29 ],
  	[ 30, 0, 0, 0, 0, 0, 0 ]
 ]*/
    Ответ написан
    Комментировать
    Комментировать

  • Как использовать DOM если сайт работает на CANVAS?

    @dimentimor
    В javaScript есть набор функций для работы с Canvas.
    Canvas_API

    Например:

    <canvas id="canvas"></canvas>

    // получить DOM элемент "canvas"
var canvas = document.getElementById("canvas");

// объект, через который управляем изображением
// у него есть набор свойств и методов
var ctx = canvas.getContext("2d");

// цвет заливки
ctx.fillStyle = "green";

// нарисовать прямоугольник от координаты (x10, y10)
// шириной 150, и высотой 100
ctx.fillRect(10, 10, 150, 100);


    Та-дааам
    97f513045b5b4a8e9dd20a5d3897119e.jpg

    А ВОТ одна из многочисленных библиотек, которая помогает работать с Canvas на более высоком уровне.
    Например, можно нарисовать картинку в Иллюстраторе или Корале, экспортировать ее в svg, и импортировать в javaScript, откуда можно получить и изменить любой элемент изображения, обрабатывать события (клик, ховер, ...), анимировать элементы.

    // UPD

    Если посмотреть на код svg изображения, то можно увидеть xml документ, в котором элементы изображения представлены в виде тегов, и некоторые свойства в виде "таблицы стилей"
    ...
<style type="text/css">
  <![CDATA[
    .fil0 {fill:#8A2628}
    .fil1 {fill:#AC3A39}
  ]]>
</style>
...
<g id="001">
  <polygon class="fil0" points="24,89 52,89 54,91 52,93 24,93 "/>
  <polygon class="fil1" points="28,86 30,86 30,96 28,96 "/>
  <polygon class="fil1" points="31,86 33,86 33,96 31,96 "/>
</g>


    А points="24,89 52,89 54,91 52,93 24,93 " - это координаты на плоскости. По ним будет проведена кривая, и заливка будет окрашена в #AC3A39 цвет.
    Так что помимо javaScript, некоторыми свойствами можно управлять через css. А svg - это файл разметки, по которому можно нарисовать canvas
    Ответ написан
    1 комментарий
    1 комментарий

  • Где используется canvas, помимо игрушек?

    @dimentimor
    Вот, например, редактор svg. Вполне утилитарно)
    Вообще, если нужен сложный интерфейс, с визуализацией данных и интерактивностью, то, конечно, canvas.
    Простые примеры: проложить маршрут на карте, и предоставить возможность изменять ключевые точки маршрута простым перетаскиванием; Или на сайте производителя мебели нужно сделать "картинку", в которой можно изменить (подобрать) цвет любого объекта.
    Ответ написан
    Комментировать
    Комментировать