Форум

maguaguru · #1 (**permalink**) 06.12.2011, 15:08

Всем здравствуйте!

Изучаю возможности Canvas, и нужно нарисовать сетку. Но вот что бы линии тонкие были не получается.
Рисую так:

context.moveTo(_x0,_y0);
      context.lineTo(_x1,_y1);

       context.strokeStyle = _color;
       context.lineWidth = 0.1;
       context.stroke();

При такой толщине вообще не рисует. Но если задать даже 0.5 - то разницы с линией толщиной в 1 px не будет.

З.Ы. Извините если вам кажется глупым вопрос, но просто в ActionScript линия такая без проблем рисуется
Может кто бодался с этим ?

devote · #2 (**permalink**) 06.12.2011, 15:28

Вроде один пиксел:

<!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>

maguaguru · #3 (**permalink**) 06.12.2011, 15:36

Так вот хочется меньше пикселя что бы была.
(Многого наверно хочу

)

devote · #4 (**permalink**) 06.12.2011, 15:44

Сообщение от maguaguru

Так вот хочется меньше пикселя что бы была.

Ну дык монитор не покажет линию толщиной меньше пикселя, обычно это эмуляция засветления, чем ниже параметр .lineWidth тем светлее линия.
например если задать параметр

context.lineWidth = 0.5;  // линия станет более светлая, эмуляция полпикселя

Aetae · #5 (**permalink**) 06.12.2011, 16:17

Сообщение от maguaguru

Так вот хочется меньше пикселя что бы была.

Как вы себе это представляете?

maguaguru · #6 (**permalink**) 06.12.2011, 16:19

Ну да, видел что светлее.
Во Flash то зараза, как то это делает. И это визуально! меньше пикселя.

devote · #7 (**permalink**) 06.12.2011, 16:23

Сообщение от maguaguru

Во Flash то зараза, как то это делает.

Не соглашусь с вами, во флешь идет таже эмуляция. Просто помимо прочего добавляется фильтр сглаживания, что и дает картину немного иную.

maguaguru · #8 (**permalink**) 06.12.2011, 16:26

Сообщение от maguaguru

Ну да, видел что светлее.
Во Flash то зараза, как то это делает. И это визуально! меньше пикселя.

Ладно, флеш как то обманывает. Буду довольствоваться так

maguaguru · #9 (**permalink**) 06.12.2011, 18:25

Поэкспериментировал я с толщиной линии в Canvas. Самая тоненькая (визуально) получается при толщине 0.125.

При 0.12 Видно уже не будет.
Может кому то пригодится

devote · #10 (**permalink**) 06.12.2011, 18:27

ну я и при толщине 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>

Форум

Справочник

Discord чат

Курсы javascript