html5 캔버스 라인 드로잉 기술 - 픽셀로 넓은 얇은 선을 그려

주석 : 픽셀 너비로 얇은 선을 그립니다. HTML5 캔버스 구현을 사용하는 경우 모든 좌표 지점이 정수인지 확인하는 데 특별한주의를 기울이십시오. 그렇지 않으면 HTML5는 자동으로 Edge Anti-Aliasing을 달성합니다. 관심있는 친구들은 효과 다이어그램을 볼 수 있습니다

ctx.linewidth = 1;

ctx.beginpath ();

Ctx.Moveto (10, 100);

Ctx.Lineto (300,100);

ctx.stroke ();

작동의 결과는 픽셀 폭이 아닙니다.

얼마나 두껍고, 웹 버전에서 다양한 라인 그리기 효과를 보는 것이 일반적입니다.

매우 다릅니다. html5 캔버스가 더 잘할 것이라고 생각하지 않았습니까?

실제로, 근본적인 이유는 캔버스의 그림이 중간에서 시작되지 않기 때문입니다.

대신 0.5 ~ 1 + 0에서 0.5가 아닌 0에서 1으로 끌어옵니다.

이것은 가장자리에서 페이드로 이어지고 줄이 넓게 보입니다.

두 가지 솔루션이 있습니다. 하나는 오정렬 범위 방법이고 다른 하나는 중심입니다.

번역 (0.5,0.5). 구현 코드는 다음과 같습니다.

잘못 배치 된 오버레이 방법을 원래 컨텍스트의 함수로 래빙했습니다.

/**

* <p> 하나의 픽셀 라인을 그립니다 </p>

* @param fromx

* @Param Formy

* @Param Tox

* @param 장난감

* @param backgroundColor- 기본값은 흰색입니다

* @param 수직 - 부울

*/

CanvasRenderingContext2d.prototype.onepixellineto = function (Fromx, Fromy, Tox, Toy, BackgroundColor, Vertical) {

var furrentstrokestyle = this.strokestyle;

this.beginpath ();

this.moveto (fromx, fromy);

this.lineto (독스, 장난감);

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 (독스, 장난감+1);

}

this.closepath ();

this.linewidth = 2;

this.strokestyle = BackgroundColor;

this.stroke ();

this.strokestyle = CurrentStrokestyle;

};

중앙 번역 방법 코드는 다음과 같습니다.

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 캔버스에서 선을 그리는 팁입니다.

그것이 좋다고 생각되면 시도해보십시오.