Помогите исправить рисовалку

0

1

Посидел, пособирал в интернете информацию. Получилось собрать такую рисовалку. http://webfile.ru/6275190 Появилось несколько вопросов: 1) Почему рисование начинается со 2ого элемента (первый почему-то рисуется черным как я понял) 2) Почему на кнопке «кривая"то и дело появляется какая-то прямая, которую не рисуем.» 3) Как можно добавить кнопку «выбор цвета рисования» и кнопку «выбор цвета фона»

Ссылка

←	Учебник по HTML

Django, нужна простая админка для редактирования контента

→

лично у меня вообще ничего не рисует. хром последний. и да, в следующий раз выкладывай на дропбокс-гитхаб и давай прямую ссылку, ок?

trashymichael ★★★
(18.12.12 21:38:56 MSK)

Ответ на: комментарий от trashymichael 18.12.12 21:38:56 MSK

либо в любой фидол (jsfiddle.net и компания, сотни их)

trashymichael ★★★
(18.12.12 21:39:21 MSK)

Ссылка

СКАЧАТЬ БЫСТРО через загрузчик WebFile
СКАЧАТЬ напрямую
new 2.html
html

canvas.height = canvas.height;
canvas.width = canvas.width;

Китайский код как он есть. Начи всё же с чего попроще, ты многого ещё не прочитал.

А рисовать оно начинает не со второго элемента, а после первого нарисованного прямоугольника ибо только в функции его рисования определяется strokeStyle. До этого он скорее всего по дефолту чёрный.

Kalashnikov ★★★
(18.12.12 22:00:27 MSK)

Ответ на: комментарий от trashymichael 18.12.12 21:38:56 MSK

а можно подробнее про дропбокс гитхаб. не совсем понял, но замечание учту

Neccurse
(18.12.12 22:12:23 MSK) автор топика

Ответ на: комментарий от Kalashnikov 18.12.12 22:00:27 MSK

Да спасибо) эти 2 странные строки удалил и добавил strokeStyle к остальным функциям, а почему всё таки «кривая» рисуется иногда с дополнительной чертой?

Neccurse
(18.12.12 22:13:55 MSK) автор топика

Ссылка

Ответ на: комментарий от Neccurse 18.12.12 22:12:23 MSK

Ставишь программу Dropbox. У тебя на диске образуется папка (с именем Dropbox), которую ты можешь использовать как флэшку (всё, что в неё попадает, автоматически синхронизируется с другими такими папками на других компах, где ты установил Dropbox). В ней будет папка Public — то, что ты положишь туда, могут видеть и другие, тебе нужно только дать им ссылку. В частности, если ты положишь туда свой HTML-файл, посмотришь публичную ссылку на него на сайте Dropbox-а и сообщишь остальным, то эти остальные смогут тут же попробовать твой файл, без всяких «скачать напрямую» и так далее.

Miguel ★★★★★
(18.12.12 23:23:02 MSK)

Ответ на: комментарий от Miguel 18.12.12 23:23:02 MSK

папки паблик у новых юзеров уже нет, прикрыта лавочка, учти

trashymichael ★★★
(19.12.12 02:06:03 MSK)

Ответ на: комментарий от trashymichael 19.12.12 02:06:03 MSK

но есть другие похоже сервисы, гитхаб и т.п. и т.д. да любой фидол подойдет

trashymichael ★★★
(19.12.12 02:06:34 MSK)

Ссылка

Ответ на: комментарий от trashymichael 19.12.12 02:06:03 MSK

вроде папка паблик есть (регался почти год назад), но когда копируешь ссыль на файл, то https://dl.dropbox.com/u/62480717/new2.html получается, но не открывается у меня лично и выдаёт 404. и всё таки по «приложению» Как можно добавить кнопку «выбор цвета рисования» и кнопку «выбор цвета фона»

Neccurse
(19.12.12 02:51:06 MSK) автор топика

Я сам по HTML специалист небольшой, но код прочитал и имею следующие замечания:

У меня в Хроме ничего не работало, пока я не внес script внутрь body.
А еще лучше оформи файл как положено, с DOCTYPE, с <html>, с <head> и т.п. Укажи кодировку при помощи meta. У меня, например, кодировка не распозналась автоматически.
Код ну очень грязный. Лишние закрывающие теги, какое-то странное форматирование, вызов beginPath при рисовании прямоугольника, где никакого пути не рисуется и, на мой неопытный взгляд, странная логика с сохранением данных в полях canvas — но в этом я не уверен.

А теперь ответы на твои вопросы:

1) Почему рисование начинается со 2ого элемента (первый почему-то рисуется черным как я понял)

У тебя canvascontext.strokeStyle выставляется только в функции, которая рисует прямоугольник. Причем ПОСЛЕ вызова canvascontext.strokeRect(), который его рисует. Поэтому первый прямоугольник рисуется черным, а если вообще не начинать рисовать прямоугольник, то все фигуры будут черными. Выставляй цвет, например, перед началом работы.

2) Почему на кнопке «кривая"то и дело появляется какая-то прямая, которую не рисуем.»

У тебя кривые вообще как-то странно рисуются, координаты сбиты. Возьми, что ли, дебаггер и посмотри, что там происходит.

3) Как можно добавить кнопку «выбор цвета рисования» и кнопку «выбор цвета фона»

Вопрос непонятен. Возьми и добавь. У тебя ведь и так используются все необходимые API. Если есть какие-то проблемы, опиши их конкретно.

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

proud_anon ★★★★★
(19.12.12 05:30:05 MSK)
Последнее исправление: proud_anon 19.12.12 05:30:32 MSK (всего исправлений: 1)

Ответ на: комментарий от proud_anon 19.12.12 05:30:05 MSK

Насчёт цвета фона, с этим обычно справляются либы, на хабре недавно мелькакла одна. Там кстати есть объекты для примитивов. Но если ты это для учёбы делаешь, советую руками реализовать, без либ. А координаты кстати сбиты везде, не только в прямой, думаю это из-за кучи магических чисел.

Ну и продолдная придирки к хтмл, ты выбрал два самых плохих способа навешивая событий, почитай про addEventListener. Вместо onload кстати лучше DOMContentLoaded, особенно с этим говнохостингом. Ну и имена f1, f2 ... - это школокод.

Kalashnikov ★★★
(19.12.12 12:59:33 MSK)