HTML5 Canvas에서 픽셀 너비의 얇은 선을 그리기 위한 코드 세부 정보

정통 HTML5 Canvas의 다음 코드

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

연산 결과가 픽셀 너비로 그려진 선이 아닙니다

웹버전에서 흔히 볼 수 있는 다양한 선 그리기 효과와는 많이 다른 느낌이네요

. HTML5 Canvas가 이렇게 좋아질 줄은 몰랐네요

사실 가장 근본적인 이유는 Canvas의 그림이 중간부터 시작되지 않는다는 점이에요

하지만 0부터 1까지. 0.5~1 + 0~0.5로 그려지지 않아서

페이드가 가장자리와 선에 나타나게 됩니다. 매우 넓어 보입니다.

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

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

탈구 보상 방법을 원래 컨텍스트의 함수로 패키징했습니다.

/**
 * <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가 자동으로 edge anti를 구현합니다. -앨리어싱

또한 픽셀 직선 중 하나가 더 두꺼워 보입니다.

작업 효과:

이제 효과는 무엇인가요? HTML5 Canvas 라인인가요? 작은 트릭을 그려보세요

좋다고 생각하시면 엄지손가락을 꾸욱 눌러주세요.

위는 HTML5 Canvas에서 픽셀 폭의 가는 선을 그리는 코드 내용입니다. 더 많은 관련 내용은 PHP 중국어를 참고해주세요. 홈페이지(www.php.cn)!