HTML5 캔버스 선 그리기 기술 - 1픽셀 너비의 얇은 선 그리기_html5 튜토리얼 기술

정통 HTML5 Canvas에 다음 코드

코드 복사

코드는 다음과 같습니다.

ctx.lineWidth = 1;
ctx.moveTo(10, 100)
ctx.Stroke(); 🎜>

작업 결과 그려진 선은 1픽셀 폭의 선이 아닙니다

다양한 선화와는 느낌이 많이 다릅니다. 웹버전에서 흔히 볼 수 있는 효과
그렇죠 HTML5 Canvas를 더 잘할 생각은 없었나요?

사실 근본적인 이유는 Canvas의 그림이 중간부터 시작되지 않기 때문입니다.

하지만 0.5에서 1이 아닌 0에서 1까지 그리는 방식이므로

가장자리에 페이드가 생기고 선이 매우 넓어 보입니다.

두 가지 해결책이 있는데 하나는 탈구 덮는 방식이고 다른 하나는 중심

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

탈구 커버리지 방법을 원래 컨텍스트의 함수로 래핑했습니다.

코드 복사

코드는 다음과 같습니다.

/**

*

한 픽셀 선 그리기

* @param fromX
* @param formY
* @param toX
* @param toY
* @param backgroundColor - 기본값은 흰색
* @param 수직 - 부울
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, 수직) {
var currentStrokeStyle =
this.beginPath();
this.moveTo(fromX, fromY)
this.lineTo(toX, toY); .closePath();
this.lineWidth=2;
this.beginPath()
if(vertical) {
this.moveTo(fromX 1, fromY);
this.lineTo(toX 1, toY);
else {
this.lineTo(toX, toY 1); >}
this.closePath();
this.lineWidth=2;
this.stroke();
currentStrokeStyle; };


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





코드를 복사하세요

코드는 다음과 같습니다:

ctx.save();

ctx.translate(0.5,0.5) ctx.lineWidth = 1 ctx.beginPath() ; ctx.moveTo(10, 100); ctx.lineTo(300,100);

ctx.restore(); 모든 좌표점이 정수인지 확인하는 데 특별한 주의를 기울이십시오. 그렇지 않으면 HTML5가 자동으로 가장자리 앤티앨리어싱을 구현하여

픽셀 직선 중 하나가 더 두꺼워 보이게 됩니다.

작동 효과:


이제 어떻게 보일까요? 이것은 HTML5 Canvas 선 그리기에 대한 작은 트릭입니다.

소리가 나면 좋아요를 눌러주세요. 좋은.