서문 : 저는 오늘 JS 책의 Canvas Canvas를 읽었습니다. 나는 너무 행복하다 ~ 나는 나의 사랑하는 캔버스이다 ~ ouye ~
나는 누군가가 푸른 뚱뚱한 남자를 그리라고 제안하는 것을 보았습니다. 그렇습니다. 왜 내가 어린 시절에 좋아하는 푸른 지방 남자를 잊었습니까? Blue Fat Man에게 사과를 표현하기 위해 오늘 나는 움직이는 Hello World를 그렸습니다.
좋아, 승객을 위해 안쪽으로 가십시오. 구절을 차단하지 마십시오. 감사합니다. 운전하자 ~
텍스트:
오늘 사진을 찍어 효과를 보자
오늘날, 뚱뚱한 푸른 남자는 이런 식으로 보이고, 나는 그가 여전히 뚱뚱하다는 것을보고 안심합니다. 이 세상은 여전히 긍정적 인 에너지로 가득 차 있으며 나보다 더 뚱뚱한 사람들이 있습니다.
코드
HTML 부분
<canvas id = "mycanvas"> 브라우저 ~ </canvas>를 업그레이드하십시오
JS 부분
window.adeventListener ( "load", function () {// 캔버스 컨텍스트 var 컨텍스트 var context = document.getElementByid ( "mycanvas"). getContext ( "2d"); // 컨텍스트가 존재하는지 여부, 다음 코드를 실행할 수 있다면 (컨텍스트)를 시작할 수 있습니다. 시계의 경계로서의 원으로 // context.arc (100,100,99,0,2*math.pi, false); // context.fillstyle = "#315f9b"; context.fill (); // 큰 원형의 가장자리를 그릴 것입니다. // 새로운 서브 경로를 시작합니다. context.beginpath (); // 시작점을 (194,100)으로 이동하고 포인트 문맥을 계산합니다 .Moveto (194,100); // 작은 원 안에 작은 원을 그립니다. (라운드 신?) context.arc (100,100,94,0,2*Math.pi, False); "#4ba2cf"; context.fill (); context.stroke (); // Blue Fat Man이 나타납니다. Context.DrawImage (이미지, 25,25,150,150); // 변환 매트릭스를 이동 한 후 // (100,100), 즉 (0,0) Context.TransLate (100,100); // 시점 컨텍스트를 그리는 후 (100,100); // 첫 번째 매개 변수는 끈이되며, 두 번째 매개 변수는 x. y // 다음 x, y 값은 디버깅 후 효과입니다 .FillText ( "12", -5, -80); context.fillText ( "6", -4,87); context.fillText ( "3", 80,1); nowtime (context);}}, false);위의 시계의 다이얼이 나타나지만 시계가 시계 인 가장 중요한 이유는 시간 (넌센스)을 표시 할 수 있기 때문에 다음 단계는 포인터를 그리는 것입니다.
nowtime 기능 부분
function nowtime (context) {// 현지 시간을 얻기 위해 날짜 개체를 만듭니다. var mydate = new Date (); // 시간, 분, 초 var myhour = mydate.gethours (); // 시간을 12 시간 형식으로 변환합니다. mydate.getSeconds (); // 다이얼 var hourarc에 현재 시간의 라디안을 저장하는 데 사용되는 시간을 설명하십시오. // 원주의 출발점으로 3 시간을 사용합니다. (myhour-3)*Math.pi/6;} // 3, 6, 9, 12로 가리킬 때 정확히 90 ° // 라디안으로 변환 된 각도에서 벗어나기 때문에 스위치로 특별 처리가 주어집니다 (myhour) {사례 0 : hourarc = math.pi*3/2; case 3 : hourarc = 0; break 6 : hourarc = 0; math.pi/2; break; case 9 : hourarc = math.pi; break;} // 호출 드로우 타임 함수 및 드로우 타임 (컨텍스트, HourArc, 60); // 다이얼의 현재 분의 다이얼에서 Radian var minarc 사용; // 라디안을 시계 방향으로 표현하기 위해 원주의 출발점으로 15 분을 사용합니다. math.pi*3/2; break; case 15 : minarc = 0; break; case 30 : minarc = math.pi/2; break; case 45 : minarc = math.pi; break;} // 콜로 타임 기능 및 드로우 타임 (Context, Minarc, 80); // 2 초를 사용하여 2 초를 사용하여 다이얼에 라디안 Var speprosct를 저장하고 15 초를 사용하고 시작합니다. Radian If (mysec <15) {secarc = 2*math.pi- (15-mysec)*math.pi/30;} else {secArc = (mysec-15)*math.pi/30;} // 초를 처리하는 것은 여전히 여기에 있습니다. math.pi*3/2; case 14 : secarc = 0; break; case 29 : secarc = math.pi/2; break; case 44 : secarc = math.pi; break;} // 호출 드로우 타임 기능 및 드로우 타임 (Context, Secarc, 80, 80, "Red"); // 지금마다 2 차 시간에 전화를 걸기 시작합니다 (). 새로운 포인터를 그리십시오. 물론 원래 시간을 지우십시오. 클리어 타임 (Context)을 사용하기 쉽습니다.그렇다면 우리는 컨텍스트를 작동 할 때 어떻게 구체적으로 포인터를 그립니다. 나도 모르겠어요. 오늘 끝내자 ~
그냥 농담, hehe, 쉽게 가져 가자 (내가 너를 엉망으로 만들 거리는 척해야한다)
다음은 총 4 개의 매개 변수가있는 드로우 타임 함수입니다 (컨텍스트, THEARC, theLength, color = "#000"). 컨텍스트는 언뜻보기에 캔버스 인 컨텍스트를 통해 볼 수 있습니다. TheArc는 우리가 캔버스를 회전시키려는 각도이며, 길이는 포인터의 길이를 나타내며 색상은 포인터의 색입니다.
함수 드로우 타임 (컨텍스트, THEARC, THELENGTER = "COLOR ="#000 ") {// 현재 캔버스 환경을 저장하고 캔버스 컨텍스트를 복원하기 위해 복원 방법과 함께 사용하여 캔버스 (// 회전) 회전에 전달되는 매개 변수는 회전을 나타냅니다. context.beginpath (); // 시작 지점을 (0,0) context.moveto (0,0)로 이동합니다. // (thelength, 0); // 지정된 색상 컨텍스트 로이 경로를 그립니다. astrokestyle = color; // 경로의 너비는 2Context.linewidth = 2; // 경로는 불가능합니다. 경로를 보려면 스트로크를 사용하여 선을 추적해야합니다. 이 줄을 추적하는 방법 위에서 사용한 몇 가지 속성으로 정의 할 수 있습니다.그것이 끝나고 있지만 매우 중요한 클리어 타임 기능도 있습니다. 그것 없이는, 당신의 시계는 밀도가 높은 초로 점유됩니다. 우리 모두는 집중 공포증 환자를 돌볼 책임이 있습니다.
함수 클리어 타임 (context) {// 우리는 새로운 하위 경로를 시작한 다음 아름다운 파란색으로 가득 찬 원을 그렸습니다. 이전에 그린 포인터를 덮고 다이얼 컨텍스트를 지우는 것과 같습니다. beginpath (); context.arc (0,0,80,0,2*Math.pi, false); conte.forlyallate = // foreal (foreal); 우연히 부상을 입었으므로 다시 소환했을 것입니다. Pikachu (? huh) var image = new Image (); image.src = "2.png"; //이 좌표는 처음으로로드 된 좌표와 다릅니다. 우리는 여전히 변환 매트릭스를 수정했기 때문에 여전히 기억하십니까? 따라서 좌표는 보완 적 맥락이어야합니다. drawImage (image, -75, -75,150,150);}글쎄, 좋아, 정말 지금 여기에있다, 식사를 할 시간이 거의 시간이야 ~ 귀여운 프로그래머들에게 먹어야 ~ 먹어야 ~