ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / das ist canvas
17 сообщений из 17, страница 1 из 1
das ist canvas
    #38332676
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
Здравствуйте, имеется код
Код: html
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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
<!--объявляем canvas и присваиваем ей id, чтобы в дальнейшем можно было к ней обратится-->

<canvas id='draw' width='300' height='200'></canvas>

<script type="text/javascript">

var canvas=document.getElementById("draw"); //находим нужный холст

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

//первые два шага являются стандартными для рисования любого объекта в canvas

//рисуем не закрашенный прямоугольник

//strokeRect(x,y,ширина,высота)

x.strokeRect(150,70,55,55); 



//для рисования линии первой должна быть вызвана функия beginPath

x.beginPath();

//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная

x.strokeStyle = '#ff0000';

//толщина линии, по умолчанию = 1

x.lineWidth   = 1;

//функцией moveTo устанавливает точку от которой начнется линия

x.moveTo (205, 70);

//функцией lineTo устанавливает точку к которой нужно провести линию

x.lineTo (220, 70);

//закроем открытые формы

x.stroke();



//рисуем не закрашенный прямоугольник

//strokeRect(x,y,ширина,высота)

x.strokeRect(220,70,55,55);

</script>



по задумке два прямоугольника должны в верхней части соединится красной линией, но этого не происходит, красной линии намного больше, подскажите пжл что не так?
2 как в прямоугольниках разместить текст?
Спасибо
...
Рейтинг: 0 / 0
16.07.2013, 13:27
| Ответить | Цитировать | Написать  
das ist canvas
    #38332697
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
катастрофа,

Поменять цвет кисти перед рисованием прямоугольника?
...
Рейтинг: 0 / 0
16.07.2013, 13:37
| Ответить | Цитировать | Написать  
das ist canvas
    #38332738
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
deblogger
Участник
x.strokeStyle = '#000000';
x.lineWidth = 1;
x.strokeRect(150,70,55,55);
x.save(); // сохранили текущие настройки

// определи новые настройки
x.strokeStyle = '#ff0000';
x.lineWidth = 1;

x.beginPath();
x.moveTo (205, 70);
x.lineTo (220, 70);
x.stroke();

x.restore(); // восстановили настройки
x.strokeRect(220,70,55,55);
...
Рейтинг: 0 / 0
16.07.2013, 13:51
| Ответить | Цитировать | Написать  
das ist canvas
    #38332746
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
deblogger
Участник
строку x.save(); // сохранили текущие настройки по логике надо перетащить на 1 выше.

И вообще, применяйте общепринятые наименования, чтобы сходу втыкать куски найденного кода в свой. вместо x используют ctx (от context)
...
Рейтинг: 0 / 0
16.07.2013, 13:53
| Ответить | Цитировать | Написать  
das ist canvas
    #38332756
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
deblogger
Участник
Насчет текста. Это геморрой шоп***ц. Даже не пытайтесь самостоятельно что-то напечатать на канвасе. Ищите готовые куски или целиком библиотеки. Я сам написал, но у меня там всего несколько сервисных строк по левому краю.

ищите по ctx.fillText
...
Рейтинг: 0 / 0
16.07.2013, 13:57
| Ответить | Цитировать | Написать  
das ist canvas
    #38332764
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
deblogger
Участник
Имеет смысл объяснить. Задать фонт, размер, цвет, выравнивание - это тривиально. Но чтобы напечатать текст в обычном веб-качестве, а не фразу типа "Прювет воландеморт!" зеленого цвета с красной обводкой (обводка печатается отдельно) - придется полностью самостоятельно расставлять буковку за буковкой.
...
Рейтинг: 0 / 0
16.07.2013, 14:00
| Ответить | Цитировать | Написать  
das ist canvas
    #38332788
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
deblogger, понял спасибо, что хоть в начале пути приостановили....
то есть канва для решения задачи - нарисовать внешне похожее на открытый файл справки (*.chm) не подходит? а что подходит?
...
Рейтинг: 0 / 0
16.07.2013, 14:13
| Ответить | Цитировать | Написать  
das ist canvas
    #38332801
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
deblogger
Участник
катастрофа,

Прикурите эту библиотеку http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ и все подойдет.
...
Рейтинг: 0 / 0
16.07.2013, 14:19
| Ответить | Цитировать | Написать  
das ist canvas
    #38332993
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
Gustlyкатастрофа,

Поменять цвет кисти перед рисованием прямоугольника?
что-то не взлетело:
Код: html
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.
31.
<!--объявляем canvas и присваиваем ей id, чтобы в дальнейшем можно было к ней обратится-->
<canvas id='draw' width='300' height='200'></canvas>
<script type="text/javascript">
var canvas=document.getElementById("draw"); //находим нужный холст
var x=canvas.getContext("2d"); //обращаемся ко встроенному объекту, который содержит различные методы для рисования
//первые два шага являются стандартными для рисования любого объекта в canvas
//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная, по умолчанию чёрная
x.strokeStyle = '#000000';
//рисуем не закрашенный прямоугольник
//strokeRect(x,y,ширина,высота)
x.strokeRect(150,70,55,55); 

//для рисования линии первой должна быть вызвана функия beginPath
x.beginPath();
//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная, по умолчанию чёрная
x.strokeStyle = '#ff0000';
//толщина линии, по умолчанию = 1
//x.lineWidth   = 1;
//функцией moveTo устанавливает точку от которой начнется линия
x.moveTo (205, 70);
//функцией lineTo устанавливает точку к которой нужно провести линию
x.lineTo (220, 70);
//закроем открытые формы
x.stroke();

//цвет линии, #ff0000 - red - красная, #ffffff - белая, #000000 - чёрная, по умолчанию чёрная
x.strokeStyle = '#000000';
//рисуем не закрашенный прямоугольник
//strokeRect(x,y,ширина,высота)
x.strokeRect(220,70,55,55);
</script>
...
Рейтинг: 0 / 0
16.07.2013, 15:26
| Ответить | Цитировать | Написать  
das ist canvas
    #38333035
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
катастрофаGustlyкатастрофа,

Поменять цвет кисти перед рисованием прямоугольника?
что-то не взлетело:

У меня все ОК, 2 черных прямоугольника, и между ними красная линия сверху.
...
Рейтинг: 0 / 0
16.07.2013, 15:39
| Ответить | Цитировать | Написать  
das ist canvas
    #38333045
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
сорри, всё взлетело, не там глянул, но так и не понял как в один из прямоугольников поместить текст, а лучше TreeView
спасибо за ссылку англоязычные ресурсы не понимаю, сорри
...
Рейтинг: 0 / 0
16.07.2013, 15:44
| Ответить | Цитировать | Написать  
das ist canvas
    #38333581
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
пожалуй апну тему...
...
Рейтинг: 0 / 0
17.07.2013, 05:29
| Ответить | Цитировать | Написать  
das ist canvas
    #38333839
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
debloggerИмеет смысл объяснить. Задать фонт, размер, цвет, выравнивание - это тривиально. Но чтобы напечатать текст в обычном веб-качестве, а не фразу типа "Прювет воландеморт!" зеленого цвета с красной обводкой (обводка печатается отдельно) - придется полностью самостоятельно расставлять буковку за буковкой.
Штоа.
Я безусловно согласен с тем, что на канвасе "веб-качество" не получить, бо как подгонки шрифта там нет, а есть только антиалиасинг, который в зависимости от ситуации, может дать сугубо неудовлетворительное качество.

Но в остальном-то какие проблемы??
Если только не печатать на канвасе текст размером в 4px, всё будет выглядеть абсолютно нормально. Ну а если очень уж надо именно мелкий текст и именно в "веб-качестве" -- то div с текстом поверх (или под) собственно канваса проблемы все решает.
...
Рейтинг: 0 / 0
17.07.2013, 11:45
| Ответить | Цитировать | Написать  
das ist canvas
    #38333858
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
Автору:

Печать текста выполняется с помощью ctx.fillText() (и ctx.strokeText(), если надо обводку букв). Ну а в ctx.font вписываете полный набор параметров шрифта (как для css).

Если надо не просто разово что-то напечатать, а делать это системно -- еще очень сильно поможет расчёт высоты букв шрифта (ширину считать канвас умеет сам). Рецепт алгоритма -- гуглится, например тут.
...
Рейтинг: 0 / 0
17.07.2013, 11:52
| Ответить | Цитировать | Написать  
das ist canvas
    #38333960
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
The_ShadoW, спасибо всем, поворот на 180 градусов, может и больше ...
подумал, что жизнь усложнять, пока написал код:

Код: html
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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
<!DOCTYPE html>
<!--html5-->

<html>
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<title>Таблица</title>

<style>
    table {
    width: 100%; /* Ширина таблицы */
	height: 100%; /* Высота таблицы */
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
    border-spacing: 1px; /* Расстояние между ячейками */
   }
   td, th {
    background: #800000; /* Цвет фона ячеек, #800000 - maroon*/
    padding: 5px; /* Поля вокруг текста */
   }
/*селектор идентификатора, "id", несколько селекторов идентификатора разделяются запятыми*/ 
	#tr2 {
	width: 100%; /* Ширина строки таблицы в процентах*/
	}
/*селектор идентификатора, "id", несколько селекторов идентификатора разделяются запятыми*/ 
	#td2 {
	width: 1; /* Ширина столбца таблицы в пикселях*/
	}
</style>

</head> 

<body>

  <table>
   <tr>
<!--допускается вместо тега <td> использовать тег <th>
текст в ячейке, оформленной с помощью тега <th>
отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки-->
   <th>УК РФ</th>
   <th>УПК РФ</th>
   <th>УИК РФ</th>
   <th>КоАП РФ</th>
   <th>ПДД</th>
   </tr>
   
   <tr id='tr2'>
   <td id='td1'>Ячейка 1</td>
   <td id='td2'></td>
   <td id='td3'>Ячейка 2</td>
   </tr>
</table>
  
</body>
</html>


Затем двинусь дальше, пока бесит
сказал же
1 height: 100%; /* Высота таблицы */ - не слушается, и чтобы первая строка например 10 пикселей, остальная высота таблицы вторая строка таблицы
2 #tr2 {
width: 100%; /* Ширина строки таблицы в процентах*/ - не слушается
3 #td2 {
width: 1; /* Ширина столбца таблицы в пикселях*/ - не слушается
Как уладить?, подскажите пжл
...
Рейтинг: 0 / 0
17.07.2013, 12:50
| Ответить | Цитировать | Написать  
das ist canvas
    #38333969
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
один огрех нашёл - не указал px - пиксели, двигаюсь дальше
...
Рейтинг: 0 / 0
17.07.2013, 12:52
| Ответить | Цитировать | Написать  
das ist canvas
    #38334004
катастрофа
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
катастрофа
Участник
Сорри, сейчас создам новую тему, так как дас ист канвас уже не актуально
...
Рейтинг: 0 / 0
17.07.2013, 13:04
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / das ist canvas
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38332756&tid=1448113]:
 0ms
get settings:
 8ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 186ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 240ms
total:  509ms
созд. / загр.: 509ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]