Canvas --> lineWidth
Всем здравствуйте!:thanks:
Изучаю возможности Canvas, и нужно нарисовать сетку. Но вот что бы линии тонкие были не получается. Рисую так: context.moveTo(_x0,_y0);
context.lineTo(_x1,_y1);
context.strokeStyle = _color;
context.lineWidth = 0.1;
context.stroke();
При такой толщине вообще не рисует. Но если задать даже 0.5 - то разницы с линией толщиной в 1 px не будет. З.Ы. Извините если вам кажется глупым вопрос, но просто в ActionScript линия такая без проблем рисуется Может кто бодался с этим ? |
Вроде один пиксел:
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas style="width: 100px; height: 100px;"></canvas>
<script style="text/javascript">
var el = document.getElementsByTagName('canvas')[0],
context = el.getContext("2d");
context.moveTo(0,0);
context.lineTo(100,100);
context.strokeStyle = '#000';
context.lineWidth = 1;
context.stroke();
</script>
</body>
</html>
|
Так вот хочется меньше пикселя что бы была.
(Многого наверно хочу :) ) |
Цитата:
например если задать параметр context.lineWidth = 0.5; // линия станет более светлая, эмуляция полпикселя |
Цитата:
|
Ну да, видел что светлее.
Во Flash то зараза, как то это делает. И это визуально! меньше пикселя. |
Цитата:
|
Цитата:
|
Поэкспериментировал я с толщиной линии в Canvas. Самая тоненькая (визуально) получается при толщине 0.125.
При 0.12 Видно уже не будет. Может кому то пригодится:) |
ну я и при толщине 0.01 вижу ее, приглядись внимательнее
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas style="width: 100px; height: 100px;"></canvas>
<script style="text/javascript">
var el = document.getElementsByTagName('canvas')[0],
context = el.getContext("2d");
context.moveTo(0,0);
context.lineTo(100,100);
context.strokeStyle = '#000';
context.lineWidth = .01;
context.stroke();
</script>
</body>
</html>
|
Взял Ваш код, признаюсь :thanks: , видно.
Но в моем случае почему то - не видно.:( Я canvas создаю динамически. |
ну и при динамическом создании ее видно:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script style="text/javascript">
var el = document.createElement('canvas'),
context = el.getContext("2d");
el.style.width = '100px';
el.style.height = '100px';
document.body.appendChild( el );
context.moveTo(10,10);
context.lineTo(100,10);
context.strokeStyle = '#000';
context.lineWidth = .01;
context.stroke();
</script>
</body>
</html>
|
Значит что то у меня не так
Буду искать |
devote,
Попробуйте нарисовать линию так: <!DOCTYPE html>
02 <html>
03 <head></head>
04 <body>
05
06 <script style="text/javascript">
07
08 var el = document.createElement('canvas'),
09 context = el.getContext("2d");
10
11 el.style.width = '100px';
12 el.style.height = '100px';
13
14 document.body.appendChild( el );
15
16 context.moveTo(10,0);
17 context.lineTo(10,100);
18
19 context.strokeStyle = '#000';
20 context.lineWidth = .01;
21 context.stroke();
22 </script>
23
24 </body>
25 </html>
Видно? |
ну видимо горизонтальные и вертикальные линии он обрабатывает иначе.
И не копируйте номера строк, там есть справа кнопочка, отключить нумерацию в коде |
http://jsfiddle.net/loktar/KcTfH/ - может быть поможет
|
| Часовой пояс GMT +3, время: 02:35. |