3. Canvas에서 그림 그리기 2

1. 함수로 추출
drawTree


function drawTree(context) {
			var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
			trunkGradient.addColorStop(0,'#663300');
			trunkGradient.addColorStop(0.4,'#996600');
			trunkGradient.addColorStop(1,'#552200');
			context.fillStyle=trunkGradient;
			context.fillRect(-5,-50,10,50);

			var canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();

		}

확대된 트리 코드 추가:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>drawTree</title>
	</head>
	<script>
		function createCanopyPath (context) {
			// 
			context.beginPath();

			context.moveTo(-25,-50);
			context.lineTo(-10,-80);
			context.lineTo(-20,-80);
			context.lineTo(-5,-110);
			context.lineTo(-15,-110);
			// 
			context.lineTo(0,-140);

			context.lineTo(15,-110);
			context.lineTo(5,-110);
			context.lineTo(20,-80);
			context.lineTo(10,-80);
			context.lineTo(25,-50);

			// ， 
			context.closePath();
		}

		function drawTree(context) {
			var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
			trunkGradient.addColorStop(0,'#663300');
			trunkGradient.addColorStop(0.4,'#996600');
			trunkGradient.addColorStop(1,'#552200');
			context.fillStyle=trunkGradient;
			context.fillRect(-5,-50,10,50);

			var canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();

		}

		function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");

			context.save();

			context.translate(130,250);
			drawTree(context);
			context.restore();

			// canvas 
			context.save();

			context.translate(260,500);
			context.scale(2,2);
			drawTree(context);
			context.restore();

			context.translate(-10,350);
			context.beginPath();

			// 
			context.moveTo(0,0);
			context.quadraticCurveTo(170,-50,260,-190);

			// 
			context.quadraticCurveTo(310,-250,410,-250);

			// 
			context.strokeStyle='#663300';
			context.lineWidth=20;
			context.stroke();

			// canvas 
			context.restore();

		}

		window.addEventListener("load",drawTrails,true);
	</script>
	<body>
		<canvas id="trails" style="border:1px solid;" width="400" height="600">
		</canvas>
	</body>
</html>

결과:
2. 그림자 더하기
DrawTree에 그림자 그리기 코드를 추가합니다.


	function drawTree(context) {
			var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
			trunkGradient.addColorStop(0,'#663300');
			trunkGradient.addColorStop(0.4,'#996600');
			trunkGradient.addColorStop(1,'#552200');
			context.fillStyle=trunkGradient;
			context.fillRect(-5,-50,10,50);

			var canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();
          
            context.save();
            //X Y ， ， 
            context.transform(1,0,-0.5,1,0,0);
            // Y 
            context.scale(1,0.6);
            
            context.fillStyle='rgba(0,0,0,0.2)';
            context.fillRect(-5,-50,10,50);
            createCanopyPath(context);
            context.fill();
            
            context.restore();
		}

결과:
3. 텍스트 추가
다음 코드 추가


function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");
			context.save();
			context.font='60px impact';
			context.fillStyle='#996600';
			context.textAlign='center';
			context.fillText('Happy Trails!',200,60,400);
			context.restore();

			context.save();

결과 표시:
4, 그림자, 글꼴 적용
다음 코드를 추가합니다.


function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");
			context.save();
			context.font='60px impact';
			context.fillStyle='#996600';
			context.textAlign='center';
			// 
			context.shadowColor='rgba(0,0,0,0.2)';
			context.shadowOffsetX=15;
			context.shadowOffsetY=-10;
			context.shadowBlur=2;
			
			context.fillText('Happy Trails!',200,60,400);
			context.restore();

결과:
모든 코드:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>drawTree</title>
	</head>
	<script>
		function createCanopyPath (context) {
			// 
			context.beginPath();

			context.moveTo(-25,-50);
			context.lineTo(-10,-80);
			context.lineTo(-20,-80);
			context.lineTo(-5,-110);
			context.lineTo(-15,-110);
			// 
			context.lineTo(0,-140);

			context.lineTo(15,-110);
			context.lineTo(5,-110);
			context.lineTo(20,-80);
			context.lineTo(10,-80);
			context.lineTo(25,-50);

			// ， 
			context.closePath();
		}

		function drawTree(context) {
			var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
			trunkGradient.addColorStop(0,'#663300');
			trunkGradient.addColorStop(0.4,'#996600');
			trunkGradient.addColorStop(1,'#552200');
			context.fillStyle=trunkGradient;
			context.fillRect(-5,-50,10,50);

			var canoyShadow =context.createLinearGradient(0,-50,0,0);
			canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
			canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
			context.fillStyle=canoyShadow;
			context.fillRect(-5,-50,10,50);

			createCanopyPath(context);
			context.lineWidth=4;
			context.lineJoin='round';
			context.strokeStyle='#663300';
			context.stroke();

			context.fillStyle="#339900";
			context.fill();

			context.save();
			//X Y ， ， 
			context.transform(1,0,-0.5,1,0,0);
			// Y 
			context.scale(1,0.6);

			context.fillStyle='rgba(0,0,0,0.2)';
			context.fillRect(-5,-50,10,50);
			createCanopyPath(context);
			context.fill();

			context.restore();
		}

		function drawTrails () {
			var canvas=document.getElementById("trails");
			var context=canvas.getContext("2d");
			context.save();
			context.font='60px impact';
			context.fillStyle='#996600';
			context.textAlign='center';
			// 
			context.shadowColor='rgba(0,0,0,0.2)';
			context.shadowOffsetX=15;
			context.shadowOffsetY=-10;
			context.shadowBlur=2;

			context.fillText('Happy Trails!',200,60,400);
			context.restore();

			context.save();

			context.translate(130,250);
			drawTree(context);
			context.restore();

			// canvas 
			context.save();

			context.translate(260,500);
			context.scale(2,2);
			drawTree(context);
			context.restore();

			context.translate(-10,350);
			context.beginPath();

			// 
			context.moveTo(0,0);
			context.quadraticCurveTo(170,-50,260,-190);

			// 
			context.quadraticCurveTo(310,-250,410,-250);

			// 
			context.strokeStyle='#663300';
			context.lineWidth=20;
			context.stroke();

		}

		window.addEventListener("load",drawTrails,true);
	</script>
	<body>
		<canvas id="trails" style="border:1px solid;" width="400" height="600">
		</canvas>
	</body>
</html>

2011-5-14 11:26 danny

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Jetpack Compose를 사용한 커스텀 컴포저블

첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다. Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

3. Canvas에서 그림 그리기 2

좋은 웹페이지 즐겨찾기