Толщина линии в элементе canvas

Question

Я хочу сделать линии толщиной 1px в элементе canvas.

Кажется, я не могу найти правильный пример. В настоящее время я использую метод на этом сайте https://developer.mozilla.org/samples/canvas-tutorial/4_5_canvas_linewidth.html

В этом примере линия, которая должна быть 1px, на самом деле выглядит как 2px, но более светлый цвет. Это как в Chrome 10, так и в Firefox 4.

Я ожидаю, что ширина самой левой строки будет такой же, как та, которая подчеркивает заголовок на этой странице.

Есть ли другой способ нарисовать линию, чтобы получить результаты, которые я ищу.

Answer 1

Обратите внимание на деталь

Однако крайние левые и все остальные линии толщины с нечетным целым числом не выглядят четкими из-за расположения пути.

и

Для получения четких линий требуется понимание того, как пройдены пути. На изображениях ниже сетка представляет координатную сетку холста. Квадраты между линиями сетки фактические пиксели на экране. Во-первых сетка изображения ниже, прямоугольник от (2,1) - (5,5) заполнено. Целиком область между ними (светло-красная) падает на границы пикселей, так что в результате заполненный прямоугольник будет иметь четкое края.

Итак, если вы рисуете с половиной пикселей ( при рисовании нечетной линии ширины пикселя ), тогда фактические нарисованные края будут падать на абсолютные пиксели и выглядят хорошо ..

пример на http://jsfiddle.net/Wav5v/

---

В качестве альтернативы вы можете использовать fillRect(x,y,width,height) с шириной 1 ..

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (i=0;i<10;i++){
    ctx.fillRect(5 + i*14, 5, 1+i, 140); 
  }
}

пример на http://jsfiddle.net/Wav5v/1/

Answer 2

Я столкнулся с той же проблемой: все мои строки были намного больше, чем 1 px

Вот что у меня было до решения:

<canvas id="myCanvas"/>
<style type="text/css">
    #myCanvas {
        position: absolute;
        top:0px;
        width:1024px;
        height: 301px;
        background: transparent;
        border: 1px solid #FFF;
        }​
</style>

Использование CSS для установки размера холста. Моим решением было установить ширину и высоту элемента canvas в html.

<canvas id="myCanvas" width=1024 height=301>

и тогда все было в порядке.