Недавно я изучал холст и просто использовал холст, чтобы нарисовать мультяшного персонажа — Губку Боба Квадратные Штаны.
Картина следующая:
Код выглядит следующим образом:
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>canvas Spongebob</title> </head> <body> <canvas id=canvas width=1000 height=700 style= background : #01539f;></canvas> </body> <script> var Canvas = document.getElementById(canvas); Canvas.getContext(2d); with(ctx){ //sleeve //left BeginPath(); groundStyle=#000; lineWidth=2; bezierCurveTo(142,253,112,263,112,303)quadaticCurveTo(120,308,150,303) fill(); ); closePath(); // right BeginPath();strokeStyle=#000; bezierCurveTo(445,253,477,263,477,303)quadaticCurveTo(467,308,447,303) fill(); //Arm//Left BeginPath();strokeStyle=#000; lineWidth=2; lineTo(110,406); lineTo(132,306); ); closePath(); //правый путь(); fillStyle=#f5e261; moveTo(458,306); lineTo(480,406); lineTo(468,306); closePath(); одежда BeginPath(); fillStyle=#fff;strokeStyle=#000; lineWidth = # 000;shadowOffsetY = 0; moveTo(145,385); lineTo(442,425); lineTo(443,385); (); // Брюки BeginPath(); fillStyle=#ae6f28; moveTo(146,427); lineTo(441,470); lineTo(442,427); fill(); closePath(); fillStyle = # 000; rect(156,438,60,15); rect(236,438,120,15); rect(373,438,60,15); closePath(); //ножка брюк startPath(); ; линияWidth = 2; переместитьTo(190,472); lineTo(235490); lineTo(235472); lineTo(350490); lineTo(395472); closePath(); BeginPath(); fillStyle = # fffe71; StrokeStyle = # 000; lineTo (208 491); lineTo (218 516); lineTo (368 491); lineTo (378 491); (); Stroke(); closePath(); fillStyle=#fff; lineWidth=2; lineTo(207560); lineTo(218517); (368 517); линияTo (368 560); lineTo(379,560); lineTo(378,517); fill(); closePath(); //strokeStyle=#536d92; lineTo(208,523); lineTo(218,523); (368 523); линияTo (378 523); инсульт(); closePath(); //strokeStyle=#da4751; lineWidth=4; lineTo(218,530); lineTo(378,530); (); // Связываем BeginPath(); StrokeStyle = # 000; lineWidth = #ef4641; moveTo(270,385); lineTo(298,413); lineTo(292,415); lineTo(295,462); lineTo(310,446); lineTo(298,415); fill(); closePath(); fillStyle=#fff; lineTo(265,410); (218 385); lineTo(325,410); lineTo(362,385); fill(); closePath(); fillStyle=#f5e262; lineWidth=5; bezierCurveTo(140,50,150,60,160); ,50); квадратичнаяКривеТо(170,40,180,50);квадратичнаяКривеТо(190,60,200,50); quadaticCurveTo(270,60,280,50);квадратичнаяCurveTo(290,40,300,50);квадратичнаяCurveTo(330,40,340,50); quadaticCurveTo(370,40,380,50);квадратичнаяCurveTo(390,60,400,50); квадратичнаяКривеТо(465,60,460,70);квадратичнаяКривеТо(450,80,460,90); квадратичнаяКривеТо(466140456150); квадратичнаяКривеТо(444160454170); квадратикКривеТо(462220452230);квадратикКривеТо(440240450250); квадратичнаяКривеТо(458,300,448,310); квадратичнаяКривеТо(436,320,446,330); квадратикКривеТо(454,380,444,390);квадратикКривеТо(435,405,424,390); квадратичнаяКривеТо(375,380,365,390);квадратичнаяКривеТо(355,400,345,390); квадратичнаяКривеТо(295,380,285,390);квадратичнаяКривеТо(275,400,265,390); quadaticCurveTo(215 380 205 390);квадратичнаяCurveTo(195 400 185 390); квадратичнаяКривеТо(135380145370); квадратичнаяКривеТо(153360143350); квадратичнаяКривеТо(131,300,141,290); квадратичнаяКривеТо(149,280,139,270); квадратичнаяКривеТо(127,220,137,210); квадратичнаяКривеТо(145,200,135,190); квадратичнаяКривеТо(123,140,133,130);квадратичнаяКривеТо(141,120,131,110); quadaticCurveTo(119,60,129,50);квадратичнаяCurveTo(137,45,140,50); fill(); //eye BeginPath(); fillStyle=#fff; ,45,0,Math.PI*2,истина); arc(341,180,45,0,Math.PI*2,true); fill(); //beginPath(); fillStyle=#50d1f1; ,0,Math.PI*2,true); fill(); closePath(); strokeStyle=#000; fillStyle=#50d1f1; arc(335,180,18,0,Math.PI*2,true(); closePath(); //beginPath(); ; fillStyle = # 000; дуга (255,180,10,0,Math.PI*2, true()); fill(); startPath(); fillStyle=#000; arc(335,180,10,0,Math.PI*2, true); closePath(); ; //ресницы BeginPath(); lineWidth=6;strokeStyle=#000; moveTo(210,122); lineTo(247112); lineTo(283117); lineTo(307120); lineTo(344112); moveTo(380,120); lineTo(365,140); closePath(); //уголок ртаbezierCurveTo(160,175,265,190,230,230) ; штрих(); closePath(); fillStyle=#fdd06b lineWidth=3; moveTo(350,230); bezierCurveTo(325,175,190,395,230); closePath(); ; //НачалоПути(); strokeStyle=#000; lineWidth=2; moveTo(275,272); lineTo(295,292); lineTo(300,292); lineTo(320,271); //rect(297,252,20,20); closePath(); //strokeStyle=#000; bezierCurveTo(210,220,290,340,380,220); ); ЗакрытьПуть(); НачалоПути(); StrokeStyle = # 000; lineWidth = 2; bezierCurveTo (205,225,205,215,220,220); closePath(); startPath(); lineWidth=2; bezierCurveTo(370,220,380,215,385,225); closePath(); //nose startPath(); lineWidth=3; fillStyle=#f5e262; moveTo(290,215); bezierCurveTo(265,170,340,185,300,225); closePath(); начатьПуть(); StrokeStyle = # cb662e; lineWidth = 2; bezierCurveTo (250,305,270,330,290,310);квадратичнаяCurveTo(300,305,310,310);квадратичнаяCurveTo(330,330,350,305); ShadowOffsetX = 0;shadowOffsetY = -3;shadowBlur = 10; closePath(); // веснушки BeginPath(); arc(197,205,2,0,Math.PI*2,true); fill(); closePath(); startPath(); fillStyle=#bf7627; arc(210,214,2,0,Math.PI*2,true); closePath(); fillStyle=#bf7627; arc(218,207,2,0,Math.PI*2,true) ; заполнить(); ЗакрытьПуть(); fillStyle=#bf7627; arc(367,205,2,0,Math.PI*2,true); closePath(); fillStyle=#bf7627; arc(390,206,2,0,Math.PI*2,true) ; заполнить(); ЗакрытьПуть(); fillStyle=#bf7627; arc(380,213,2,0,Math.PI*2,true); closePath(); //кожаные туфли//left startPath(); fillStyle=#000; lineWidth=4; ShadowColor = # 000; ShadowOffsetX = 0; ShadowOffsetY = 0; дуга (180 577,11,0, Math.PI*2, true bezierCurveTo (185 560 197 575 207 560); moveTo (207 560); lineTo (217 560); quadaticCurveTo(197,580,180,585);квадратичнаяCurveTo(207,561,185,570); rect(207,585,10,4) штрих(); //ctx.rotate(m * Math.PI / 180) closePath(); ; стиль штриха = # 000; fillStyle = # 000; colorWidth = # 000; ShadowOffsetY = 0; arc (405,577,11,0,Math.PI*2, bezierCurveTo(400,560,388,575,378,560); moveTo (378 560); lineTo (368 560); квадратичная кривая (358 570 368 585); квадратичная кривая (388 580 405 585); квадратичная кривая (422 561 400 570); штрих(); //ctx.rotate( m * Math.PI / 180) closePath(); // белая точка startPath(); fillStyle=#c4b127; fill(); ctx, 160, 100, 10, 15;EvenCompEllipse(ctx, 150, 150, 5,7 , 12) EvenCompEllipse(ctx, 380, 340, 6, 9) closePath(); } function EvenCompEllipse(ctx, x, y, a, b) { ctx.save(); //Выбираем большее из a и b в качестве радиуса. параметр метода var r = (a > b) ? a : var коэффициент X = a / r // Коэффициент масштабирования по горизонтальной оси var коэффициент Y = 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.stroke(); ctx.fill(); ctx.restore() };Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.