Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / das ist canvas / 17 сообщений из 17, страница 1 из 1
16.07.2013, 13:27
    #38332676
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
das ist canvas
Здравствуйте, имеется код
Код: 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:37
    #38332697
Gustly
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
das ist canvas
катастрофа,

Поменять цвет кисти перед рисованием прямоугольника?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.07.2013, 13:51
    #38332738
deblogger
deblogger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
das ist canvas
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:53
    #38332746
deblogger
deblogger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
das ist canvas
строку x.save(); // сохранили текущие настройки по логике надо перетащить на 1 выше.

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

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

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

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

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

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

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

Если надо не просто разово что-то напечатать, а делать это системно -- еще очень сильно поможет расчёт высоты букв шрифта (ширину считать канвас умеет сам). Рецепт алгоритма -- гуглится, например тут.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2013, 12:50
    #38333960
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
das ist canvas
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:52
    #38333969
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
das ist canvas
один огрех нашёл - не указал px - пиксели, двигаюсь дальше
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2013, 13:04
    #38334004
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
das ist canvas
Сорри, сейчас создам новую тему, так как дас ист канвас уже не актуально
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / das ist canvas / 17 сообщений из 17, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 401ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448113]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 84ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 36ms
get tp. blocked users:
 2ms
others: 241ms
total:  401ms
x
x
Закрыть


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