캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법

php中世界最好的语言
풀어 주다: 2018-03-14 09:57:24
원래의
4037명이 탐색했습니다.

이번에는 캔버스를 사용하여 별이 빛나는 하늘, 달, 지구를 그리고 텍스트를 추가하는 방법을 보여 드리겠습니다. 캔버스를 사용하여 별이 빛나는 하늘, 달, 지구를 그리고 텍스트를 추가하세요. 먼저 최종 렌더링:

최종 효과

캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법4부분으로 나누어 효과를 그려줍니다.

1. 별이 빛나는 하늘

별이 빛나는 하늘 렌더링은 다음과 같습니다.

캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법 이 별이 빛나는 하늘을 분석해 보겠습니다. 먼저 별은 페이지의 2/3 이상에 분포되어 있습니다. 및 회전 각도는 확산된 푸른 하늘 효과와 함께 페이지 중앙에 있습니다.

자, 분석된 점을 바탕으로 별이 빛나는 하늘을 그려봅시다.

그러나 가장 중요한 점은 다섯개 별을 그리는 법을 배우는 것입니다.
중, 고등학교 수학 지식을 활용하여 오각별의 각 꼭지점의 좌표를 계산합니다. 구체적인
함수
는 다음과 같습니다. 즉, 정사각형 오각별이 그려집니다. 다음은 간단한 도표입니다. 관심이 있으시면 직접 그려보고 각 꼭지점의 값을 계산해 보세요.

캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법계산에 따르면, 10개의 꼭지점 값을 차례로 구하고 양의 다섯개 별을 그립니다. 코드는 다음과 같습니다.

function setPath(cxt){
    cxt.beginPath();    for (var i = 0; i < 5; i++) {
        cxt.lineTo(            Math.cos((18 + i * 72 ) / 180 * Math.PI) * 10 ,
            -Math.sin((18 + i * 72 ) / 180 * Math.PI) * 10
        );
        cxt.lineTo(            Math.cos((54 + i * 72) / 180 * Math.PI) * 5 ,
            -Math.sin((54 + i * 72 ) / 180 * Math.PI) * 5
        );
    }
    cxt.closePath();
}
로그인 후 복사

5개 별을 그린 후에는 다섯 개에 대해 생각해야 합니다. -뾰족한 별. 회전 및 확대/축소 변경은 캔버스의 회전 메서드를 사용하고, 확대/축소 변경은 스케일을 사용하여 수행합니다. 구체적인 코드는 다음과 같습니다.

function drawStar(cxt, R, x, y, rot) {
    cxt.save();
    cxt.translate(x,y);
    cxt.rotate(rot/180*Math.PI);
    cxt.scale(R,R);
    setPath(cxt)
    cxt.fillStyle = "#fb3";
    cxt.fill();
    cxt.restore();
}
로그인 후 복사

이 시점에서 이 메서드를 빌려올 수 있습니다. 임의의 값을 입력하고 별이 빛나는 하늘을 그려보세요.

for (var i = 0; i < 400; i++) {        
            var r = Math.random();
            var x = Math.random() * canvas.width;           
            var y = Math.random() * canvas.height*0.6;        
            var rot = Math.random() * 360;
        drawStar(context, r, x, y, rot);
    }
로그인 후 복사

자, 이 별 조각에 하늘색을 추가해 보겠습니다.

 var linearGard=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
    linearGard.addColorStop(1.0,"black");
    linearGard.addColorStop(0.0,"#148EFB");
    context.fillStyle = linearGard;
    context.fillRect(0, 0, canvas.width, canvas.height);
로그인 후 복사

이쯤 되면 우리의 별하늘은 완성됩니다.

2. 초승달

위의 별이 빛나는 하늘을 바탕으로 초승달을 추가합니다. 효과 다이어그램은 다음과 같습니다.

캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법초승달은 황갈색 값을 만들어 계산을 위한 방정식을 만들 수 있습니다. 보조선의 각도는 동일합니다.

캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법최종 코드는 다음과 같습니다. rot은 회전 각도, fillColor는 채우기 색상입니다.

function fillMoon(cxt,x1,y1,x2,y2,r,/*option*/rot,/*option*/fillColor){
cxt.save();
    cxt.beginPath();
    cxt.rotate(rot/180*Math.PI);    // 创建开始点
    cxt.arc(x1,y1,r,0.5*Math.PI,1.5*Math.PI,true);
    cxt.moveTo(x1,y1-r);
    cxt.arcTo(x2,y2,x1,y1+r,dis(r,x2-x1)); // 创建弧
    cxt.fillStyle=fillColor||"#fb3";
    cxt.fill();
cxt.restore();
}
로그인 후 복사

3. Earth

위 내용을 바탕으로 토지를 추가했습니다. 렌더링은 다음과 같습니다.

3508659-e056b8ad8871b6a캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법지구를 그리는 데 가장 중요한 것은 bezierCurveTo 메서드를 사용하는 것입니다. bezierCurveTo의 매개변수가 계산됩니다. landStyle은 모양에 색상을 지정합니다.

코드는 다음과 같습니다.

function drawLand(cxt){
    cxt.save();
    cxt.beginPath();
    cxt.moveTo(0,600);
    cxt.bezierCurveTo(540,400,660,800,1430,600);
    cxt.lineTo(1430,800);
    cxt.lineTo(0,800);
    cxt.closePath();    var landStyle=cxt.createLinearGradient(0,800,0,0);
    landStyle.addColorStop(0,"#030");
    landStyle.addColorStop(1,"#580");
    cxt.fillStyle=landStyle;
    cxt.fill();
    cxt.restore();
}
로그인 후 복사

4. Text

이것이 가장 간단한 단계인 마지막 단계입니다.

텍스트의 크기와 색상을 설정하고 fillText를 사용하여 텍스트를 그립니다.

   CXT.save();
    CXT.font="bold 20px Georgia";
    CXT.fillStyle="#fff";
    CXT.fillText("Canvas文字绘制",200,650);
    CXT.fillText("——海上月_天上月",500,700);
    CXT.restore();
}```
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트Other

관련 기사를 주목하세요! 추천 자료:

class="no-js" 무슨 뜻인가요?


Git의 일반적인 문구


nodejs npm 공통 명령 모음


캔버스를 사용하여 그림을 그리는 방법 다채로운 칠교놀이

위 내용은 캔버스를 사용하여 별이 빛나는 하늘, 달, 땅을 그리고 텍스트를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿