주석 : 픽셀 너비로 얇은 선을 그립니다. HTML5 캔버스 구현을 사용하는 경우 모든 좌표 지점이 정수인지 확인하는 데 특별한주의를 기울이십시오. 그렇지 않으면 HTML5는 자동으로 Edge Anti-Aliasing을 달성합니다. 관심있는 친구들은 효과 다이어그램을 볼 수 있습니다
정통 HTML5 캔버스의 다음 코드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 캔버스에서 선을 그리는 팁입니다.
그것이 좋다고 생각되면 시도해보십시오.