HTML5 Canvas Line Skills - нарисовать тонкую линию, которая широко распространена пикселями

Комментарий: Нарисуйте тонкую линию с шириной пикселей. При использовании реализации HTML5 Canvas обратите особое внимание на то, чтобы все ваши координатные точки были целыми числами, в противном случае HTML5 автоматически достигнет преимущественных анти-алистов. Заинтересованные друзья могут увидеть диаграмму эффекта

ctx.linewidth = 1;

ctx.beginpath ();

ctx.moveto (10, 100);

Ctx.LineTo (300 100);

ctx.stroke ();

Результатом операции не является линией ширины пикселей

Насколько он ощущается, и это обычно видеть различные эффекты чертежа линии на веб -версии

Совершенно иначе, разве вы не думаете, что HTML5 Canvas сделает это лучше?

Фактически, фундаментальная причина заключается в том, что рисунок холста не начинается с середины.

Вместо этого он нарисован от 0 до 1, а не от 0,5 до 1 + 0 до 0,5, поэтому

Это приводит к исчезновению на краю и выглядит очень широко в очереди.

Есть два решения, одно - это метод охвата смещения, а другое - центр

Перевод (0,5,0,5). Код реализации выглядит следующим образом:

Я завернул неуместный метод наложения в функцию исходного контекста

/**

* <p> Нарисуйте одну пиксельную линию </p>

* @param fromx

* @param formy

* @param tox

* @param игрушка

* @param founalcolor - по умолчанию белый

* @param vertical - логический

*/

CanvasRenderingContext2d.prototype.onepixellineto = function (fromx, fromy, tox, toy, founalcolor, вертикальный) {

var CurrentStrokestyle = this.strokestyle;

this.beginpath ();

this.moveto (fromx, fromy);

this.lineto (tox, игрушка);

this.closepath ();

this.linewidth = 2;

this.Stroke ();

this.beginpath ();

if (вертикальный) {

this.moveto (fromx+1, fromy);

this.lineto (tox+1, игрушка);

} еще {

this.moveto (fromx, fromy+1);

this.lineto (tox, toy+1);

}

this.closepath ();

this.linewidth = 2;

это.

this.Stroke ();

это.

};

Центральный код метода перевода заключается в следующем:

ctx.save ();

ctx.translate (0,5,0,5);

ctx.linewidth = 1;

ctx.beginpath ();

ctx.moveto (10, 100);

Ctx.LineTo (300 100);

ctx.stroke ();

ctx.restore ();

Обратите особое внимание на то, чтобы все ваши координатные баллы были целыми числами, в противном случае HTML5 будет автоматически реализовать Edge Antialiasing

Это заставляет один из ваших пикселей выглядеть толще.

Эффект бега:

Какой эффект сейчас? Это совет для линий рисования в холсте HTML5

Если вы думаете, что это хорошо, попробуйте.