Нарисуйте изображение и динамически заполните его цветом или узорами - PullRequest
0 голосов
/ 07 декабря 2011

Мне нужно нарисовать произвольную форму и залить ее сплошным цветом или рисунком.Я уже получил форму и смог изменить цвет заливки с помощью 2d html5 canvas и javascript.

Однако я отказался от подхода canvas, поскольку это веб-приложение для телефонов, и обнаружил, что на одной странице есть несколько холстов.В частности, он работал очень медленно на старых телефонах.

Может кто-нибудь посоветовать альтернативный подход, который бы сработал, учитывая скорость важна?Я размышлял:

Рисование с помощью css, но, похоже, много разметки и возни с созданием относительно простой фигуры.

SVG - не знал, что это существовало до прошлой ночи,Этот пример http://www.w3schools.com/svg/tryit.asp?filename=trysvg_polygon4 выглядит очень похоже на canvas, имеет ли это какое-то влияние на производительность?

Наложение какой-то маски CSS Webkit, например http://www.webkit.org/blog/181/css-masks/, но с цветом фона или рисунком,Кажется, это может быть проблематично, если на странице есть фоновое изображение, а не сплошной цвет.

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

Спасибо

Ответы [ 2 ]

1 голос
/ 08 декабря 2011

С SVG вы можете использовать CSS для стилизации заливки, что позволяет очень просто установить заливку либо в шаблон, либо в сплошной цвет.

Вот пример шаблонов в svg.

1 голос
/ 07 декабря 2011

Ознакомьтесь с Raphaël, он основан на SVG и поддерживается следующими браузерами:

  • Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.

http://raphaeljs.com/

...