Ich habe mich vor Kurzem mit Leinwand beschäftigt und einfach Leinwand verwendet, um eine Zeichentrickfigur zu zeichnen – SpongeBob Schwammkopf.
Das Bild ist wie folgt:
Der Code lautet wie folgt:
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>canvas Spongebob</title> </head> <body> <canvas id=canvas width=1000 height=700 style= hintergrund : #01539f;></canvas> </body> <script> var canvas = document.getElementById(canvas var ctx =). canvas.getContext(2d); with(ctx){ //sleeve//left beginPath(); fillStyle=#fff; lineWidth=2; bezierCurveTo(120,308,150,303) ); closePath(); //right beginPath(); fillStyle=#000; lineWidth=2; bezierCurveTo(467,308,447,303) //Arm//Left beginPath(); fillStyle=#000; lineTo(120,406); lineTo(132,306); ); closePath(); //right beginPath(); fillStyle=#f5e261; StrokeStyle=#000; lineTo(480,406); lineTo(468,306); Kleidung beginPath(); fillStyle=#fff; StrokeStyle=#000; lineWidth=5;shadowOffsetX = 0; lineTo(442,425); (); //Pants beginPath(); fillStyle=#ae6f28; StrokeStyle=#000; lineTo(441,470); lineTo(); fillStyle=#000; rect(156,438,60,15); rect(373,438,60,15); closePath(); fillStyle=#ae6f28; ; lineWidth=2; moveTo(190,472); lineTo(190,490); lineTo(350,472); lineTo(395,472); beginPath(); fillStyle=#fffe71; StrokeStyle=#000; lineTo(208,516); lineTo(368,516); lineTo(378,491); (); Stroke(); closePath(); fillStyle=#fff; lineWidth=2; lineTo(218,517); (368.517); lineTo(368.560); lineTo(379,517); fill(); closePath(); lineWidth=4; lineTo(218,523); (368.523); lineTo(378.523); Stroke(); //Roter Balken beginPath(); lineWidth=4; lineTo(378,530); (); //Tie beginPath(); StrokeStyle=#000; lineWidth=5; fillStyle=#ef4641; lineTo(292,413); lineTo(295,462); lineTo(310,446); lineTo(); closePath(); fillStyle=#fff; lineTo (218.385); moveTo(310.393); lineTo(325,410); lineTo(); closePath(); fillStyle=#f5e262; bezierCurve=5; ,50); quadraticCurveTo(170,40,180,50); quadraticCurveTo(210,40,220,50); quadraticCurveTo(250,40,260,50); quadratische Kurve zu (270,60,280,50); quadratische Kurve zu (310,60,320,50); quadratische Kurve zu (350,60,360,50); quadraticCurveTo(370,40,380,50); quadraticCurveTo(410,40,420,50); quadraticCurveTo(450,40,460,50); quadraticCurveTo(465,60,460,70); quadraticCurveTo(450,80,460,90); quadratischicCurveTo(446,120,456,130); quadraticCurveTo(466,140,456,150); quadraticCurveTo(444,160,454,170); quadraticCurveTo(442,200,452,210); quadraticCurveTo(462,220,452,230); quadraticCurveTo(440,240,450,250); quadraticCurveTo(438,280,448,290); quadraticCurveTo(458,300,448,310); quadraticCurveTo(436,320,446,330); quadraticCurveTo(434,360,444,370); quadraticCurveTo(454,380,444,390); quadraticCurveTo(435,405,424,390); quadraticCurveTo(395,400,385,390); quadratische Kurve zu (375,380,365,390); quadratische Kurve zu (335,380,325,390); quadratische Kurve zu (315,400,305,390); quadratische Kurve zu (295,380,285,390); quadratische Kurve zu (255,380,245,390); quadratische Kurve zu (235,400,225,390); quadraticCurveTo(215,380,205,390); quadraticCurveTo(195,400,185,390); quadraticCurveTo(155,400,145,390); quadraticCurveTo(135,380,145,370); quadraticCurveTo(153,360,143,350); quadraticCurveTo(151,320,141,310); quadraticCurveTo(131,300,141,290); quadraticCurveTo(149,280,139,270); quadraticCurveTo(147,240,137,230); quadraticCurveTo(127,220,137,210); quadraticCurveTo(145,200,135,190); quadraticCurveTo(143,160,133,150); quadratische Kurve zu (123,140,133,130); quadratische Kurve zu (121,100,131,90); quadratische Kurve zu (139,80,129,70); quadraticCurveTo(119,60,129,50); fill(); //eye beginPath(); fillStyle=#fff; ,45,0,Math.PI*2,true); arc(341,180,45,0,Math.PI*2,true); fill(); //beginPath(); fillStyle=#50d1f1; ,0,Math.PI*2,true); fill(); StrokeStyle=#000; fillStyle=#50d1f1; arc(335,180,18,0,Math.PI*2,true); closePath(); ; fillStyle=#000; arc(255,180,10,0,Math.PI*2,true); fill(); beginPath(); fillStyle=#000; closePath(); ; //eyelashes beginPath(); lineWidth=6; StrokeStyle=#000; lineTo(223,142); lineTo(283,117); moveTo(380,120); lineTo(365,140); closePath(); fillStyle=#fdd06b lineWidth=3; moveTo(160,175,265,190,230,230) ; Schlaganfall(); closePath(); fillStyle=#ca5939; bezierCurveTo(); ; //beginPath(); StrokeStyle=#000; fillStyle=#fff; lineTo(295,272); lineTo(320,292); lineTo(320,271); //rect(297,252,20,20); ); closePath(); beginPath(); StrokeStyle=#000; bezierCurveTo(205,225,215,220,220); closePath(); closePath(); //nose beginPath(); fillStyle=#f5e262; bezierCurve(); beginPath(); StrokeStyle=#cb662e; lineWidth=2; bezierCurveTo(250,305,270,330,290,310); quadraticCurveTo(330,330,350,305); ShadowOffsetX = 0; ShadowBlur = 10; closePath(); FillStyle=#bf7627; fill(); closePath(); beginPath(); fillStyle=#bf7627; arc(210,214,2,0,Math.PI*2,true); fill(); beginPath(); arc(218,207,2,0,Math.PI*2,true) ; fill(); closePath(); fillStyle=#bf7627; arc(367,205,2,0,Math.PI*2,true); fill(); beginPath(); arc(390,206,2,0,Math.PI*2,true) ; fill(); closePath(); fillStyle=#bf7627; arc(380,213,2,0,Math.PI*2,true); fill(); //shoes//left beginPath(); fillStyle=#000; = #000;shadowOffsetX = 0;shadowOffsetY = 0; arc(180,577,11,0,Math.PI*2,true); bezierCurveTo(185,560,197,575,207,560); lineTo(217,560); quadraticCurveTo(197,580,180,585); quadraticCurveTo(207,561,185,570); fill(); //ctx.rotate( m * Math.PI / 180) closePath(); ; StrokeStyle=#000; fillStyle=#000; ShadowColor = #000; 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) Stroke(); //ctx.rotate( m * Math.PI / 180) //white point beginPath(); 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(); //Wählen Sie den größeren von a und b als Bogen aus Parameter der Methode var r = (a > b) ? a : b; var ratioX = a / r; //Horizontales Achsenskalierungsverhältnis var ratioY = b / r; //Skalierungsverhältnis der vertikalen Achse ctx.scale(ratioX, ratioY); //Skalieren (gleichmäßige Komprimierung) ctx.beginPath(); //Zeichne gegen den Uhrzeigersinn, beginnend vom linken Endpunkt der Ellipse ctx.moveTo((x + a) / VerhältnisX, y / VerhältnisY); ctx.arc(x / VerhältnisX, y / VerhältnisY, r, 0, 2 * Math.PI; ctx.Stroke(); ctx.fill(); ctx.restore( };Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.