Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2011, 15:08
Аватар для maguaguru
Интересующийся
Отправить личное сообщение для maguaguru Посмотреть профиль Найти все сообщения от maguaguru
 
Регистрация: 30.11.2011
Сообщений: 19

Canvas --> lineWidth
Всем здравствуйте!

Изучаю возможности Canvas, и нужно нарисовать сетку. Но вот что бы линии тонкие были не получается.
Рисую так:
context.moveTo(_x0,_y0);
      context.lineTo(_x1,_y1);

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


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

З.Ы. Извините если вам кажется глупым вопрос, но просто в ActionScript линия такая без проблем рисуется
Может кто бодался с этим ?
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2011, 15:28
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

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

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2011, 15:36
Аватар для maguaguru
Интересующийся
Отправить личное сообщение для maguaguru Посмотреть профиль Найти все сообщения от maguaguru
 
Регистрация: 30.11.2011
Сообщений: 19

Так вот хочется меньше пикселя что бы была.
(Многого наверно хочу )
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2011, 15:44
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от maguaguru
Так вот хочется меньше пикселя что бы была.
Ну дык монитор не покажет линию толщиной меньше пикселя, обычно это эмуляция засветления, чем ниже параметр .lineWidth тем светлее линия.
например если задать параметр
context.lineWidth = 0.5;  // линия станет более светлая, эмуляция полпикселя
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2011, 16:17
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

Сообщение от maguaguru Посмотреть сообщение
Так вот хочется меньше пикселя что бы была.
Как вы себе это представляете?
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 06.12.2011, 16:19
Аватар для maguaguru
Интересующийся
Отправить личное сообщение для maguaguru Посмотреть профиль Найти все сообщения от maguaguru
 
Регистрация: 30.11.2011
Сообщений: 19

Ну да, видел что светлее.
Во Flash то зараза, как то это делает. И это визуально! меньше пикселя.
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2011, 16:23
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от maguaguru
Во Flash то зараза, как то это делает.
Не соглашусь с вами, во флешь идет таже эмуляция. Просто помимо прочего добавляется фильтр сглаживания, что и дает картину немного иную.
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2011, 16:26
Аватар для maguaguru
Интересующийся
Отправить личное сообщение для maguaguru Посмотреть профиль Найти все сообщения от maguaguru
 
Регистрация: 30.11.2011
Сообщений: 19

Сообщение от maguaguru Посмотреть сообщение
Ну да, видел что светлее.
Во Flash то зараза, как то это делает. И это визуально! меньше пикселя.
Ладно, флеш как то обманывает. Буду довольствоваться так
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2011, 18:25
Аватар для maguaguru
Интересующийся
Отправить личное сообщение для maguaguru Посмотреть профиль Найти все сообщения от maguaguru
 
Регистрация: 30.11.2011
Сообщений: 19

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

При 0.12 Видно уже не будет.
Может кому то пригодится
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2011, 18:27
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

ну я и при толщине 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запуск Canvas в IE9! Severtain Общие вопросы Javascript 7 11.04.2012 12:36
[newbie question] input (file) -> submit -> php(json) zatoichi AJAX и COMET 1 18.01.2011 12:18
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16
И еще одна тема про canvas ;) 13rust Элементы интерфейса 8 21.09.2010 13:58
Задача: палец > кнопка > div > to >textarea Апельсин Events/DOM/Window 12 19.03.2010 20:40