HTML5 Canvas는 1픽셀 너비의 얇은 선 그리기를 구현합니다.-H5 튜토리얼-php.cn

HTML5 Canvas는 1픽셀 너비의 얇은 선 그리기를 구현합니다.

不言

풀어 주다： 2018-06-22 15:22:21

원래의

2451명이 탐색했습니다.

HTML5 Canvas를 사용하여 픽셀 너비의 얇은 선을 그립니다. 모든 좌표점이 정수인지 확인하세요. 그렇지 않으면 HTML5가 자동으로 가장자리 앤티앨리어싱을 구현합니다. 관심 있는 친구들은 렌더링을 살펴볼 수 있습니다.

Orthodox HTML5 Canvas의 다음 코드

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

로그인 후 복사

연산 결과가 1픽셀 너비의 선이 아닙니다

웹에서 흔히 볼 수 있는 다양한 선 그리기 효과와는 느낌이 많이 다릅니다. version

. HTML5 Canvas인가요? 더 잘할 줄은 몰랐네요

사실 근본적인 이유는 Canvas가 중간부터 시작되지 않고

0.5부터가 아닌 1부터 시작하기 때문이죠. 1 + 0 ~ 0.5이므로

페이드가 발생합니다. 가장자리에서 선이 매우 넓어 보입니다.

두 가지 솔루션이 있는데 하나는 탈구 보장 방식이고 다른 하나는 중심

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

Dislocation Coverage 방식을 원래 컨텍스트의 함수로 패키징했습니다.

/** 
* <p> draw one pixel line </p> 
* @param fromX 
* @param formY 
* @param toX 
* @param toY 
* @param backgroundColor - default is white 
* @param vertical - boolean 
*/ 
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) { 
var currentStrokeStyle = this.strokeStyle; 
this.beginPath(); 
this.moveTo(fromX, fromY); 
this.lineTo(toX, toY); 
this.closePath(); 
this.lineWidth=2; 
this.stroke(); 
this.beginPath(); 
if(vertical) { 
this.moveTo(fromX+1, fromY); 
this.lineTo(toX+1, toY); 
} else { 
this.moveTo(fromX, fromY+1); 
this.lineTo(toX, toY+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가 자동으로 가장자리를 구현합니다. 앤티앨리어싱

또한 1픽셀 직선이 더 두꺼워 보이게 합니다.

실행 효과:

이제 효과는 어떻습니까? 이것은 HTML5 Canvas에서 선을 그리는 데 대한 약간의 트릭입니다.

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!