HTML5 Canvas API 프로그래밍 _html5 튜토리얼 기술

context.restore()

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 drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');

context.save();
context.translate(130, 250);

//캐노피를 나타내는 경로 생성
createCanopyPath(context);

// 현재 경로 그리기
context.Stroke();
context.restore();
}

window.addEventListener("load", drawTrails, true)

// 첫 번째 곡선은 오른쪽 위쪽으로 곡선을 이룹니다
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);

//오른쪽 아래로 곡선
context.quadraticCurveTo(310, -250, 410, -250);

// 넓은 갈색 획으로 경로를 그립니다.
context.StrokeStyle = '#663300';
context.lineWidth = 20;
context.Stroke();

// 이전 캔버스 상태 복원
context.restore()

// 이미지가 로드된 후 그리기 함수
bark.onload = function () {
drawTrails();
}

//몸통의 왼쪽 가장자리는 일반적으로 갈색입니다
trunkGradient.addColorStop(0, '#663300');

// 트렁크 왼쪽 가운데 부분의 색상에 대해 논의가 필요합니다
trunkGradient.addColorStop(0.4, '#996600');

//오른쪽 가장자리의 색상이 더 어두워야 합니다
trunkGradient.addColorStop(1, '#552200');

// 트렁크를 그라데이션으로 채우기
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// 세로 그라데이션을 만들어 나무 줄기에 캐노피 그림자가 있는 트렁크
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// 투영 그라데이션의 시작점은 투명도가 50%인 검은색입니다.
canopyShadow.addColorStop(0, ' rgba(0, 0, 0, 0.5)');
// 방향은 수직 아래쪽입니다. 짧은 거리 내에서는 그라데이션이 완전히 투명하게 빠르게 변경됩니다.
// 이 길이를 초과하는 투영
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

// 투영 그라데이션으로 나무 줄기를 채웁니다.
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

//두꺼운 갈색 선을 배경 이미지로 교체
context.StrokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.Stroke() ;

// X=260, Y=500에 두 번째 트리를 그립니다.
context.save();
context.translate(260, 500);

//두 번째 트리의 높이와 너비를 원래 값의 2배로 늘립니다.
context.scale(2, 2);
drawTree(context);
context.restore();

context.restore();

// Y 값이 증가함에 따라 X 값도 증가합니다.
// 그림자로 사용되는 기울어진 나무를 만들 수 있습니다.
// 변환을 적용한 후 모두 좌표는 행렬
context.transform(1, 0,
-0.5, 1,
, 0);

// Y축 방향으로 그림자 높이를 원래 값의 60%로 변경합니다
context.scale(1, 0.6);

// 투명도 20%의 검은색으로 트렁크를 채웁니다
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(-5, -50, 10, 50);

//기존 그림자 효과를 사용하여 트리를 다시 그립니다.
createCanopyPath(context);
context.fill();

//이전 캔버스 상태 복원
context.restore();

//글꼴 크기는 60이고 글꼴은 Impact
context.font = "60px Impact";

//채우기 색상
context.fillStyle = '#996600';
//Center
context.textAlign = 'center';

//텍스트 그리기
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();

// 오른쪽으로 15px, 왼쪽으로 10px 이동
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// 약간 흐린 그림자
context.shadowBlur = 2;