私は最近キャンバスを勉強していて、単純にキャンバスを使って漫画のキャラクター、スポンジ・ボブを描きました。
写真は次のとおりです。
コードは次のとおりです。
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>キャンバス スポンジボブ</title> </head> <body> <canvas id=canvas width=1000 height=700 style= 背景: #01539f;></canvas> </body> <script> var Canvas = document.getElementById(canvas); Canvas.getContext(2d); with(ctx){ //sleeve//left beginPath(); fillStyle=#fff; lineWidth=2; bezierCurveTo(120,308,150,303); ); closePath(); // right beginPath(); fillStyle=#fff; lineWidth=2(467,308,447,303); //Arm// 左の beginPath(); ストロークスタイル = #006; lineTo(120,406); ); //右開始パス(); fillStyle=#f5e261; lineTo(470,406); //hand//left//服の開始パス(); ストロークスタイル=#000; lineWidth = #000; シャドウオフセット Y = 0; lineTo(443,385); (); //パンツ beginPath(); fillStyle=#ae6f28; moveTo(147,470); lineTo(442,427); //パンツパターン beginPath(); fillStyle=#000; rect(156,438,60,15); rect(373,438,60,15); // ズボンの脚 beginPath(); ; lineWidth=2; 移動先(190,472); lineTo(190,490); lineTo(350,490); // 脚beginPath(); fillStyle=#fffe71;ストロークスタイル=#000; lineTo(218,516); lineTo(378,491); ();ストローク(); //socks beginPath(); ストロークスタイル=#000; (368,517); lineTo(368,560); lineTo(379,517); closePath(); lineWidth(218,523); (368,523); lineTo(378,523);ストローク(); //ストロークスタイル=#da4751; lineTo(378,530); (); //結合 beginPath(); lineWidth=#ef4641; lineTo(292,413); lineTo(295,462); lineTo(310,415); closePath(); lineTo(265,410); (218,385); 移動先(310,393); lineTo(325,410); lineTo(); closePath(); fillStyle=#f5e262; ,50);二次曲線To(170,40,180,50); 二次曲線To(210,40,220,50);二次曲線To(270,60,280,50); 二次曲線To(310,60,320,50);二次曲線To(370,40,380,50); 二次曲線To(410,40,440,50);二次曲線To(465,60,460,70); 二次曲線To(468,100,456,130);二次曲線To(466,140,456,150); 二次曲線To(442,200,452,210);二次曲線To(462,220,452,230); 二次曲線To(460,260,450,270);二次曲線To(458,300,448,310); 二次曲線To(456,340,446,350);二次曲線To(454,380,444,390); 二次曲線To(415,380,405,390);二次曲線To(375,380,365,390); 二次曲線To(335,380,325,390);二次曲線To(295,380,285,390); 二次曲線To(255,380,245,390);二次曲線To(215,380,205,390); 二次曲線To(175,380,165,390);二次曲線To(135,380,145,370); 二次曲線To(153,340,143,330);二次曲線To(131,300,141,290); 二次曲線To(149,260,139,250);二次曲線To(127,220,137,210); 二次曲線To(145,180,135,170);二次曲線To(123,140,133,130); 二次曲線To(121,100,131,90); quadraticCurveTo(119,60,140,50); closePath(); ,45,0,Math.PI*2,true);アーク(341,180,45,0,Math.PI*2,true); ストローク(); ストロークスタイル=#000; ,0,Math.PI*2,true); ストローク();ストロークスタイル=#000; アーク(335,180,18,0,Math.PI*2,true); //ストロークスタイル=#000 ; fillStyle=#000; アーク(255,180,10,0,Math.PI*2,true);フィル(); ストロークスタイル=#000; ストローク(); ; //まつげの開始パス(); ストロークスタイル=#000;行先(247,112); 行先(320,140); moveTo(380,120); lineTo(365,140); closePath(); fillStyle=#fdd06b lineWidth=3; moveTo(160,175,265,190,230,230); ;ストローク(); 閉じるパス(); 塗りつぶしスタイル=#ca5939; ストローク(325,175,435,190,395,230) ; //開始パス();ストロークスタイル=#000; 塗りつぶしスタイル=#fff; ラインTo(295,292); ラインTo(320,292); lineTo(320,271); //rect(297,252,20,20); closePath(); lineWidth=3; ); クローズパス();ストロークスタイル=#000; ストローク(205,225,205,220,220); ストロークスタイル=#000; closePath(); ストロークスタイル=#f5e262; ストローク(265,170,185,300,225); beginPath();ストロークスタイル = #cb662e; bezierCurveTo(300,330,350,310);シャドウオフセットX = 0; シャドウオフセットY = 10; ストローク(); そばかす開始パス();フィル(); クローズパス();アーク(210,214,2,0,Math.PI*2,true); クローズパス(); フィルスタイル=#bf7627; ; フィル(); 開始パス();アーク(367,205,2,0,Math.PI*2,true); クローズパス(); フィルスタイル=#bf7627; ; フィル(); 開始パス(); arc(380,213,2,0,Math.PI*2,true); closePath(); ストロークスタイル=#000;シャドウカラー = #000; シャドウオフセット X = 0; シャドウブラー Y = 0; arc(180,577,11,0,Math.PI*2,true); bezierCurveTo(207,560); quadraticCurveTo(197,580,180,585);quadraticCurveTo(207,585,10,4)draw(); //ctx.rotate( m * Math.PI / 180) closePath(); ; ストロークスタイル=#000; fillStyle=#000; シャドウカラー = #000; シャドウオフセット Y = 0; アーク(400,560,388,575,378,560);移動先(378,560); 二次曲線先(358,580,405,585);ストローク(); //ctx.rotate( m * Math.PI / 180) closePath(); 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 rateY = b / r; //縦軸のスケーリング比率 ctx.scale(ratioX, rateY); //スケール（均等圧縮） ctx.beginPath() //楕円の左端から反時計回りに描画 ctx.moveTo((x + a) / rateX , y / 比率Y); ctx.arc(x / 比率X, y / 比率Y, r, 0, 2 * ctx.closePath(); ctx.ストローク(); ctx.restore();以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。