Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2012, 13:41
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Canvas толщина линии
Есть код:
canvas = document.getElementById("graf"); 
ctx = canvas.getContext("2d");
ctx.strokeStyle="gray";           
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);                       
ctx.lineTo(canvas.width,canvas.height/2);
ctx.closePath();

В документации сказано что "ctx.lineWidth=1;" - толщина линии в пикселях, по факту линия шириной 2 px, причем если сделать "ctx.lineWidth=2;", то толщина линии не меняется, линия просто становится ярче (при дальнейшем увеличении толщина линии увеличивается).

Я нашёл на форуме такую тему, но не могу пройти по ссылке т.к. на работе закрыты прокси)

Подскажите как сделать линию толщиной в 1 px.

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2012, 14:52
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Пример:
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <canvas id="graf" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;" width="500" height="400"></canvas>

<script style="text/javascript">
var mashtab = 12;
function initGraf() {            
            var canvas, ctx;
            canvas = document.getElementById("graf"); 
            ctx = canvas.getContext("2d");
            ctx.strokeStyle="#000";           
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(0, canvas.height/2);                       
            ctx.lineTo(canvas.width,canvas.height/2);
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            ctx.moveTo(1, 0);                       
            ctx.lineTo(1,canvas.height);
            ctx.stroke();
            ctx.closePath();
            
            ctx.strokeStyle="#000";
            ctx.beginPath();
            for (var y = canvas.height/2; y < canvas.height; y = y + mashtab) {
                ctx.beginPath();
                var tmp = Boolean(true)
                for (var x = 5; x < canvas.width;) {
                    ctx.beginPath();
                    if (tmp) {
                        ctx.moveTo(x - 6, y);
                    }
                    ctx.lineTo(x, y);
                    x = parseInt(x + 5);
                    ctx.stroke();
                    ctx.closePath();
                    if (tmp) {
                        tmp = false;
                    } else {
                        tmp = true;
                    };
                    console.log(tmp)
                }
            };
            ctx.stroke();
            ctx.closePath();
        }
initGraf();
</script>

  </body>
</html>


Почему все линии толщиной 2 px?
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2012, 18:34
Аватар для Дзен-трансгуманист
√₋̅₁̅
Отправить личное сообщение для Дзен-трансгуманист Посмотреть профиль Найти все сообщения от Дзен-трансгуманист
 
Регистрация: 18.06.2012
Сообщений: 385

tsigel,
Видимая толщина в 2 пикселя происходит по причине интерполяции координат, потому что stroke обводит контур пути с обеих его сторон, т.е. половину толщины слева и половину справа. Например, ты рисуешь вертикальную линию с координатой x=100. Тогда в ширину она будет расположена между x=99.5 и x=100.5. Естественно, при этом захватывается два соседних пикселя, которые закрашиваются примерно с половинной непрозрачностью, и кажется что толщина линии равна 2. Поэтому, чтобы нарисовать линию, лежащую строго на одном пикселе, нужно использовать координаты вида N+0.5, где N - любое целое число.
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById( "canvas" ).getContext( "2d" );
ctx.lineWidth = 1;

// размытая линия
ctx.moveTo( 50, 50 );
ctx.lineTo( 50, 150 );

// четкая линия
ctx.moveTo( 150.5, 50 );
ctx.lineTo( 150.5, 150 );

ctx.stroke();
</script>
</body>


Вообще говоря, чтобы нарисовать четкую горизонтальную или вертикальную линию, постоянная координата должна быть равна N+0.5 при нечетной толщине линии, и N - при четной толщине.

Или можно обойтись простыми прямоугольниками, рисуя линии функцией fillRect.
__________________

Гейзенберг, возможно, читал этот тред.

Последний раз редактировалось Дзен-трансгуманист, 21.12.2012 в 19:10.
Ответить с цитированием
  #4 (permalink)  
Старый 22.12.2012, 10:13
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Дзен-трансгуманист, спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 27.12.2012, 11:20
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Результаты чудес канваса, ещё раз спасибо!

Последний раз редактировалось tsigel, 14.01.2013 в 15:05.
Ответить с цитированием
  #6 (permalink)  
Старый 03.09.2014, 17:45
Профессор
Отправить личное сообщение для l-liava-l Посмотреть профиль Найти все сообщения от l-liava-l
 
Регистрация: 14.03.2012
Сообщений: 1,808

Вооброжаемый помошник)
__________________
Научу себя плохому
Ответить с цитированием
  #7 (permalink)  
Старый 03.09.2014, 17:51
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,586

l-liava-l, Вообще дурная это хрень - удаление всех постов. =\
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 03.09.2014, 18:01
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Цитата:
Результаты чудес канваса, ещё раз спасибо!
Раньше там была интерактивная карта России... эх Это почти что первый мой ООП код.
Ответить с цитированием
  #9 (permalink)  
Старый 10.09.2014, 23:30
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Восстановил сообщение от Дзена, ибо больно полезная штука, не знал. Может, кому полезно будет)
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #10 (permalink)  
Старый 11.09.2014, 00:20
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Дзен-трансгуманист,
очень полезно, спасибо.



А на форуме вообще есть система закладок тем/комментов? А то уже далеко не в первый раз замечаю полезный коммент, а добавлять очередную закладку в браузер не хочется.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
canvas и drawImage() jussik Элементы интерфейса 0 27.10.2012 16:57
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Запуск Canvas в IE9! Severtain Общие вопросы Javascript 7 11.04.2012 12:36
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16