HTML5 Canvas 구성 요소를 사용하여 태극권 패턴을 그리기 위한 그래픽 코드 세부 정보

구현 아이디어 :

구현 원리는 주로 HTML5의 Canvas 구성 요소에서 제공하는 경로 기능을 사용하여 두 개를 그리는 것입니다

.

각각 검은색과 흰색의 두 개의 반원이 원을 형성합니다. 그림이 완성되면 그려진 검은색 원과 흰색 원 안에 각각 검은색

과 흰색 원을 그립니다. 커다란 흑백 원. 마지막으로 그려진 두 개의

작은 검은색과 흰색 원을 각각 흰색 점과 검은색 점으로 채우고 반경은 약 10픽셀입니다.

두 번째 프로그램의 효과는 다음과 같습니다.

3가지 핵심 프로그램 분석:

반원을 그리는 프로그램으로, 200과 200은 그리기 시작하는 중심점의 좌표를 나타내고 세 번째 인자인 150은 원의 반지름을 나타냅니다.

네 번째 매개변수는 시작 각도, 다섯 번째 매개변수는 끝 각도, 마지막 매개변수는 시계 방향인지 반시계 방향인지 나타냅니다.

흰색 반원을 그리는 코드는 다음과 같습니다. 다음:

		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();

그리기 검은색 반원에 대한 코드는 다음과 같습니다.

		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();

태극권 패턴에 텍스트를 추가하는 코드는 다음과 같습니다. 투명도 처리 캔버스 전역 투명도 설정 기능

은 다음과 같습니다.

		// set transparency value  
		ctx.globalAlpha = 0.2;

Draw 텍스트 코드는 다음과 같습니다.

		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);

전체 JavaScript 코드는 다음과 같습니다. 프로그램은 다음과 같습니다:

	window.onload = function() {
		var cvs = document.getElementById("canvas-path");
		ctx = cvs.getContext("2d");

		// Create circle, radius = 150
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();
		
		// draw sub circle
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 275, 75, 0, Math.PI*2, false); 
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 125, 75, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// fill black and white point
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 275, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 125, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// set transparency value  
		ctx.globalAlpha = 0.2;  
		  
		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);
		ctx.globalAlpha = 1.0; 
		ctx.shadowOffsetX = 2;  
		ctx.shadowOffsetY = 2;  
		ctx.shadowBlur = 2;  
		ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
		ctx.fillStyle = "#000";
		ctx.font = "20px Times New Roman";
		ctx.fillText("-created by gloomyfish", 100, 30);
	};

왜 일러스트레이션에 내 이름을 추가해야 합니까? 기사가 재인쇄된 것을 알았을 때 표시되지 않았기 때문입니다!

위 내용은 태극권 그리기용 HTML5 Canvas 컴포넌트의 그래픽 코드에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!