холст библиотека для рисования изображений

Question

HTML5 canvas обеспечивает большую гибкость при рисовании изображений с использованием JavaScript.Нам нужно сгенерировать код JavaScript на основе входных данных от пользователя (скажем, 10 шариков синего цвета, 5 квадратов зеленого цвета и определенного размера ...).Существует ли библиотека, которая предоставляет соответствующие API Javascript, чтобы было проще генерировать холст вместе с кодом JavaScript для требований, перечисленных выше?

Answer 1

С Fabric.js довольно просто рисовать простые фигуры (круги, прямоугольники и т. Д.) На холсте.Он также поддерживает импорт и манипуляции с изображениями.

Отображение прямоугольника, например, так же просто, как:

var canvas = new fabric.Canvas('id_of_canvas_element');

var rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red'
});

canvas.add(rect);

Взгляните на demos .