안녕하세요, 친애하는 친구들, 나는 나 자신의 프론트 엔드를 멸시하고, 처음으로 블로그를 쓰고, 잘 쓰지 말고, 이해하도록 용서 해주세요.
가르치기 전에, 당신은 기본 캔버스 기본 작동 방법을 마스터했다고 생각합니다. 여기와 함께;
승인! 아래 그림은 우리의 완성 후 간단한 효과입니다.
1. 캔버스 정의우선, 이제 캔버스의 크기를 정의하기 위해 HTML 파일에 <canvas> 태그를 삽입합니다. 동시에, 캔버스의 배경색은 내부 스타일 테이블에 설정됩니다 (그리기에 편리 할 때 시청).
<! 캔버스 {배경 :#5151a2;} </style> </head> <body> <canvas id = 캔버스 너비 = 800 높이 = 600> </body> </html>다음 핵심은 JS DOM 작동 방법을 통해 캔버스 요소 객체를 얻는 것입니다 캔버스의 2D 그래픽;
<script type = text/javaScript> // 캔버스를 얻는 2D 컨텍스트를 얻습니다.2. 풍차베이스를 그립니다
풍차베이스의 기하학적 인물은 사다리꼴을 그리며 색상을 채울 수 있습니다. 코드를 직접보십시오 ~~!
// 함수, 포장 풍차 기능의 바닥베이스 () {ctx.beginpath (); (0,#CCC); = 라이너; / 사다리꼴의 충전 방법은 가변 (그라디언트 컬러)으로 설정되어있다 출발점 Lineeto (410,600);페이지의 효과를 살펴 보겠습니다. 간단합니까?
(나는 너무 너무 많이 느낀다 ~! ~!)
3. 나뭇잎을 그립니다다음 부분은이 애니메이션에서 가장 중요한 장소가 될 것입니다. 잎의 구조는 120 °입니다 당신의 마음에도, 먼저 당신의 마음을 끌거나 잎을 먼저 떠나십시오. 잎의 모양은 어떻게 그려야합니까? 잎을 복사하고 붙여 넣을 수 있습니까? 대답은 확실히 괜찮습니다.
사고 분석 :
1) 세 잎의 모양은 정확히 동일하기 때문에 두 번째 잎과 세 번째 잎은이 잎의 그림을 캡슐화해야합니까? 바인드 () 함수라고 부릅니다! 교차로 그냥 전화 해! 왜! TM이 너무 똑똑합니다
2) 세 잎은 둥근 심장을 가지고 있습니다. 좌표 값을 촉진하기 위해, 우리는 잎을 그리는 데 훨씬 편리합니다. Translate () 메소드는 여기에서 모바일 좌표계를 사용합니다!
3) 가장 어려운 점은 애니메이션 원칙이 그림의 문서 구조에 영향을 미치기 때문에 애니메이션이 어떻게 실현되는지 이해하는 것입니다.
우선, 우리는 새로운 도면 환경을 만듭니다. 환경 1, 우리는 첫 번째 그리기 환경에서 첫 번째 드로잉 환경을 만들기 위해 120 °를 회전시킵니다 상승 ()에 잎을 부르면 두 잎의 드로잉 방법을 그립니다. ;
우리는 애니메이션을 달성하려면 첫 번째 잎의 드로잉 환경 1을 회전시켜야합니다. 교차로 사격 : 6666666
4) 결국, 일부 기본적인 모양 스타일이 디버깅됩니다! 그라디언트, 투명성 등!
잎을 그리십시오이 잎 모양을 그렸을 때, 나는 천천히 미학적으로 저를 용서해주었습니다.
여기서는 환경 회전 수의 변경의 매개 변수로 변수 var num = 0;을 선언합니다. 그러면 코드를 직접 살펴 보겠습니다! 교차로 교차로
var = 0; ctx.save (); , 좌표 시스템 CTX.ROTATE ((Math.Pi/180)*NUM); Liner1. ADDCOLORSSTOP (0.5,#FFF); CTX.BEGINPATH (); 120 ° Ctx.save (); 120); // 두 번째 상태 (회전 좌표계) // ctx.beginpath (); ctx.ctx.createradialgadient (0,0,0,0,0,16); ccc). 번역 좌표계) Num+= 5;停的变化, ************************************** ***************************************************************************************** 누군가 ***************************************************************************************** 누군가 ***************************************************************************************** 누군가 ***************, 각 잎은 반복 코드입니다. 여기서는 기능 포장 함수 bind () {ctx.moveto (0,0); 30, -12) (190, -3); 12,30,12); ctx .fill ();} 4. 애니메이션을 설정하십시오애니메이션 의이 부분은 비교적 간단합니다. 타이머를 제거하고 기능을 호출하십시오. 교차로 교차로
setInterVal (function () {ctx.clearRect);}, 50);소스 코드 : https://github.com/224137748/canvas/blob/master/windmill.html
위는이 기사의 모든 내용입니다.