Как нарисовать убывающий волнистый луч или сложные фигуры в HTML5 / Canvas - PullRequest
Новая
       23

Как нарисовать убывающий волнистый луч или сложные фигуры в HTML5 / Canvas

1 голос
/ 12 июня 2011

Я пытаюсь генерировать солнечные «лучи», которые лучше всего описать как выглядящие как лезвие ножа, например, часть лезвия на этой картинке. this

Это всего лишь пример. Мне нужна только треугольная форма с двумя или тремя волнами, которые я могу закрыть и заполнить.

Еще лучше, есть какое-то приложение HTML5, с помощью которого я могу нарисовать сложную фигуру и затем экспортировать javascript (moveTo, arcTo, bezierCurveTo, quadraticCurveTo, ...). Нечто похожее на HTML5 Безье Sketcher , но это сохраняет JavaScript. Пытаться рисовать сложные фигуры вслепую очень сложно, и я не хочу переходить на SVG, если в этом нет необходимости.

Спасибо 1 000 000

Редактировать: Я также посмотрел все варианты на этом сайте . Ни один из них не позволит мне рисовать и заполнять простые кривые, а затем просматривать / сохранять команды canvs. Все команды show показывают их в новых библиотеках, таких как fabric или jsDraw2D.

Ответы [ 3 ]

2 голосов
/ 12 июня 2011

Вы можете разобрать SVG в холст html5 с помощью fabric.js.Это может помочь вам.

https://github.com/kangax/fabric.js

Помимо SVG, он может помочь вам с хорошим API для рисования на холсте.

1 голос
/ 13 июня 2011

Ваше решение, вероятно, лучше, но для справки, я попытался поэкспериментировать с графиком и получил несколько хороших результатов: Уравнения: 

sin(x)*log(2/x) + x/10
sin(x)*log(2/x) - x/10

Вы можете построить их используя: http://www.graphsketch.com/

Хорошо выглядит при 0

1 голос
/ 12 июня 2011

Я нашел ответ среди решений для Конвертировать SVG в Canvas дружественный вывод .Автор не думал, что это работает для него, но я думаю, что это так же прекрасно, как и все, что я видел.

Профессор Облако (... чертовски потрясающе! Это не первое, что он сделал, я нашел невероятно полезным.) Создал сайт, чтобы получать SVG-вход и продукт Canvas.Вы можете увидеть это здесь, на профессоре Cloud SVG-to-Canvas .

Используя этот сайт, я могу что-то нарисовать или даже взять векторного изображения в AI, экспортировать как SVG, вырезатьиз команд и вставьте их в Prof. Clouds удивительный SVG-чиппер, и получите код Canvas.Я понимаю, что он не поддерживает все возможности SVG, но и Canvas тоже.Отлично для меня.

...