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>
|
| Часовой пояс GMT +3, время: 23:21. |