저는 최근 캔버스를 공부하고 있는데 캔버스를 사용하여 만화 캐릭터인 네모바지 스폰지밥을 그렸습니다.
그림은 다음과 같습니다.
코드는 다음과 같습니다:
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>캔버스 스폰지밥</title> </head> <body> <canvas id=canvas width=1000 height=700 style= background : #01539f;></canvas> </body> <script> var canvas = document.getElementById(canvas); canvas.getContext(2d){ //sleeve//left startPath(); lineWidth=2; bezierCurveTo(120,308,150,303) fill() ); closePath(); fillStyle=#fff; lineWidth=2; bezierCurveTo(467,308,447,303) fill(); //Arm//왼쪽 시작 경로(); fillStyle=#000; lineWidth=2; lineTo(110,406); lineTo(132,306); ); closePath(); //오른쪽 시작 경로(); fillStyle=#f5e261; 스트로크 스타일=#000; lineTo(470,406); lineTo(468,306); closePath(); 옷 시작 경로(); fillStyle=#fff=#000; lineWidth=5; ShadowOffsetY = 0; moveTo(146,425); lineTo(443,385); (); //바지 시작 경로(); fillStyle=#ae6f28; 스트로크 스타일=#000; lineTo(147,470); lineTo(442,427); closePath(); fillStyle=#000; ret(156,438,60,15); ret(373,438,60,15); closePath(); //바지 다리 startPath(); ; 라인폭=2; 이동(190,472); lineTo(190,490); lineTo(235,472); lineTo(395,490); fill(); 시작경로(); fillStyle=#fffe71; 스트로크스타일=#000; lineTo(208,516); lineTo(218,491); lineTo(378,516); (); 스트로크(); closePath(); fillStyle=#fff; lineWidth=2; lineTo(218,560); (368,517); 라인투(368,560); lineTo(378,517); fill(); closePath(); lineTo(208,523); (368,523); 라인투(378,523); 스트로크(); closePath(); 스트로크 스타일=#da4751; moveTo(218,530); lineTo(378,530); (); //묶기 시작 경로(); lineWidth=5; moveTo(270,385); lineTo(292,413); lineTo(292,415); lineTo(298,415); fill(); closePath(); (218,385); 이동(310,393); lineTo(362,385); fill(); closePath(); 스트로크스타일=#f5e262; ,50); quadraticCurveTo(170,40,180,50);quadraticCurveTo(210,40,220,50);quadraticCurveTo(250,40,260,50); QuadraticCurveTo(270,60,280,50); QuadraticCurveTo(310,60,320,50); QuadraticCurveTo(350,60,360,50); QuadraticCurveTo(370,40,380,50); QuadraticCurveTo(410,40,420,50); QuadraticCurveTo(450,40,460,50); 이차CurveTo(465,60,460,70); 이차CurveTo(450,80,460,90); 이차CurveTo(468,100,458,110); 이차곡선To(466,140,456,150); 이차곡선To(444,160,454,170); 이차곡선To(464,180,454,190); 이차곡선To(462,220,452,230); 이차곡선To(440,240,450,250); 이차곡선To(460,260,450,270); 이차 곡선 To(458,300,448,310); 이차 곡선 To(436,320,446,330); 이차 곡선 To(456,340,446,350); 이차CurveTo(454,380,444,390); 이차CurveTo(435,405,424,390); 이차CurveTo(415,380,405,390); 이차CurveTo(375,380,365,390); 이차CurveTo(355,400,345,390); 이차CurveTo(335,380,325,390); 이차CurveTo(295,380,285,390); 이차CurveTo(275,400,265,390); 이차CurveTo(255,380,245,390); 이차 곡선 To(215,380,205,390); 이차 곡선 To(195,400,185,390); 이차 곡선 To(175,380,165,390); quadraticCurveTo(135,380,145,370);quadraticCurveTo(153,360,143,350);quadraticCurveTo(133,340,143,330); quadraticCurveTo(131,300,141,290);quadraticCurveTo(149,280,139,270);quadraticCurveTo(129,260,139,250); quadraticCurveTo(127,220,137,210);quadraticCurveTo(145,200,135,190);quadraticCurveTo(125,180,135,170); quadraticCurveTo(123,140,133,130);quadraticCurveTo(141,120,131,110);quadraticCurveTo(121,100,131,90); quadraticCurveTo(119,60,129,50); 스트로크(); closePath(); ,45,0,Math.PI*2,true); arc(341,180,45,0,Math.PI*2,true); fill(); closePath(); ,0,Math.PI*2,true); fill(); startPath(); 스트로크스타일=#50d1f1; arc(335,180,18,0,Math.PI*2,true); closePath(); ; fillStyle=#000; arc(255,180,10,0,Math.PI*2,true); fill(); startPath(); fillStyle=#000; arc(335,180,10,0,Math.PI*2,true); ; //속눈썹 시작 경로(); lineWidth=6; moveTo(210,122); lineTo(247,112); lineTo(283,117); moveTo(320,140); moveTo(380,120); lineTo(365,140); closePath(); fillStyle=#fdd06b lineWidth=3; moveTo(190,230); ; 스트로크(); closePath(); fillStyle=#ca5939; moveTo(325,175,435,190,395,230); ; //시작경로(); 스트로크 스타일=#fff; moveTo(275,292); lineTo(300,272); lineTo(320,271); //right(); 스트로크(); //beginPath(); lineWidth=3; ); closePath(); 스트로크 스타일=#000; bezierCurveTo(205,225,205,215,220,220); startPath(); lineWidth=2; closePath(); lineWidth=3; moveTo(290,215); bezierCurveTo(265,170,340,185,300,225); 시작 경로(); 스트로크 스타일=#cb662e; lineWidth=2; bezierCurveTo(250,305,270,330,290,310);quadraticCurveTo(330,330,350,305); ShadowOffsetX = -3; ShadowBlur = 10; closePath(); //주근깨 fillStyle=#bf7627; fill(); closePath(); fillStyle=#bf7627; arc(210,214,2,0,Math.PI*2,true); closePath(); fillStyle=#bf7627; arc(218,207,2,0,Math.PI*2,true) ; 채우기(); 시작 경로(); arc(367,205,2,0,Math.PI*2,true); closePath(); fillStyle=#bf7627; arc(390,206,2,0,Math.PI*2,true) ; 채우기(); 시작 경로(); arc(380,213,2,0,Math.PI*2,true); closePath(); //가죽 신발//startStyle=#000; lineWidth=4; 그림자 색상 = #000; 그림자 오프셋X = 0; 그림자 오프셋 Y = 0; arc(180,577,11,0,Math.PI*2,true); bezierCurveTo(185,560,197,575,207,560); moveTo(217,560); quadraticCurveTo(197,580,180,585);quadraticCurveTo(207,561,185,570); ret(207,585,10,4) fill(); //ctx.rotate(m * Math.PI / 180) closePath(); ; 스트로크스타일=#000; fillStyle=#000; lineWidth=4;shadowOffsetX=0;shadowBlur=0;arc(405,577,11,0,Math.PI*2,true); moveTo(378,560); lineTo(368,560);quadraticCurveTo(388,580,405,585);quadraticCurveTo(368,585,10,4) 스트로크(); fill(); //ctx.rotate( m * Math.PI / 180) closePath(); //흰색 점 BeginPath(); fillStyle=#c4b127; ctx, 160, 100, 10, 15) EvenCompEllipse(ctx, 150, 150, 5, 7), EvenCompEllipse(ctx, 200, 320, 7, 10) EvenCompEllipse(ctx, 225, 350, 11, 16) EvenCompEllipse(ctx, 425, 120, 11, 16) EvenCompEllipse(ctx, 410, 320, 9 , 12) EvenCompEllipse(ctx, 380, 340, 6, 9) closePath() } function EvenCompEllipse(ctx, x, y, a, b) { ctx.save(); //a와 b 중 큰 쪽을 원호로 선택합니다. 메소드의 매개변수 var r = (a > b) ? a : b; var ratioX = a / r; //가로축 스케일링 비율 var ratioY = b / r; //세로축 스케일링 비율 ctx.scale(ratioX, ratioY); //스케일(균일 압축) ctx.beginPath(); //타원의 왼쪽 끝점에서 시계 반대 방향으로 그립니다. ctx.moveTo((x + a) / ratioX , y / 비율Y); ctx.arc(x / 비율X, y / 비율Y, r, 0, 2 * Math.PI); ctx.스트로크(); ctx.restore() };위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.