J'ai récemment étudié la toile et j'ai simplement utilisé la toile pour dessiner un personnage de dessin animé - Bob l'éponge SquarePants.
L'image est la suivante :
Le code est le suivant :
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>toile Bob l'éponge</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){ //manche//left startPath(); fillStyle=#fff; traitStyle=#000; ); closePath(); //right startPath(); fillStyle=#fff; StrokeStyle=#000; bezierCurveTo(445,253,477,263,477,303) fillStyle=#000; //Bras//Left startPath(); fillStyle=#f5e261; lineTo(132,306); ); closePath(); //droit commencerPath(); fillStyle=#f5e261; traitStyle=#000; moveTo(458,306); lineTo(480,406); fill(); vêtements startPath(); fillStyle=#fff; StrokeStyle=#000; lineWidth = 5 ; shadowColor = #000 ; shadowOffsetY = 0 ; moveTo(146 425); (); //Le pantalon commencePath(); fillStyle=#ae6f28; traitStyle=#000; moveTo(146,427); lineTo(441,470); lineTo(442,427); fillStyle=#000; rect(156,438,60,15); rect(236,438,120,15); rect(373,438,60,15); closePath(); //jambe du pantalon fillStyle=#ae6f28; ; largeur de ligne=2; moveTo(190 472); lineTo(190,490); lineTo(235,490); lineTo(395,472); startPath(); fillStyle=#fffe71; traitStyle=#000; ligneLargeur=2; ligneVers(208 516); ligneVers(218 491); (); Stroke(); closePath(); //chaussettes beginPath(); fillStyle=#fff; lineWidth=2; (368 517); ligneVers(368 560); lineTo(379,560); lineTo(378,517); fill(); closePath(); //barre bleue startPath(); lineWidth=4; (368 523); ligneVers(378 523); Stroke(); closePath(); //Barre rouge BeginPath(); lineTo(378,530); (); //Tie BeginPath(); StrokeStyle=#000; lineWidth=5; fillStyle=#ef4641; moveTo(270,385); lineTo(298,413); lineTo(310,446); lineTo(298,415); fill(); closePath(); //collier startPath(); fillStyle=#fff; (218 385); déplacer vers (310 393); lineTo(325,410); lineTo(362,385); fill(); closePath(); //face startPath(); fillStyle=#f5e262; ,50 ); quadraticCurveTo(170,40,180,50); quadraticCurveTo(190,60,200,50); quadraticCurveTo(210,40,220,50); quadraticCurveTo(270,60,280,50); quadraticCurveTo(290,40,300,50); quadraticCurveTo(310,60,320,50); quadraticCurveTo(370,40,380,50); quadraticCurveTo(390,60,400,50); quadraticCurveTo(410,40,420,50); quadraticCurveTo(465,60,460,70); quadraticCurveTo(450,80,460,90); quadraticCurveTo(468,100,458,110); quadraticCurveTo(466,140,456,150); quadraticCurveTo(444,160,454,170); quadraticCurveTo(464,180,454,190); quadraticCurveTo(462,220,452,230); quadraticCurveTo(440,240,450,250); quadraticCurveTo(460,260,450,270); quadraticCurveTo(458,300,448,310); quadraticCurveTo(436,320,446,330); quadraticCurveTo(456,340,446,350); quadraticCurveTo(454,380,444,390); quadraticCurveTo(435,405,424,390); quadraticCurveTo(415,380,405,390); quadraticCurveTo(375,380,365,390); quadraticCurveTo(355,400,345,390); quadraticCurveTo(335,380,325,390); quadraticCurveTo(295,380,285,390); quadraticCurveTo(275,400,265,390); quadraticCurveTo(255,380,245,390); quadraticCurveTo(215,380,205,390); quadraticCurveTo(195,400,185,390); quadraticCurveTo(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); quadraticCurveTo(137,45,140,50); fill(); //eye startPath(); ,45,0,Math.PI*2,vrai); arc(341,180,45,0,Math.PI*2,true); trait(); closePath(); //beginPath(); ,0,Math.PI*2,true); trait(); closePath(); StrokeStyle=#000; fillStyle=#50d1f1; arc(335,180,18,0,Math.PI*2,true(); fill(); ; fillStyle=#000; arc(255,180,10,0,Math.PI*2,true(); fill(); closePath(); startPath(); StrokeStyle=#000; fillStyle=#000; ; //cils startPath(); lineWidth=6; StrokeStyle=#000; lineTo(223,142); moveTo(247,112); lineTo(247,133); moveTo(283,117); lineTo(344,120); moveTo(380,120); lineTo(365,140); closePath(); //coin de la bouche beginPath(); fillStyle=#fdd06b lineWidth=3; moveTo(190,230); ; trait(); closePath(); startPath(); fillStyle=#fdd06b lineWidth=3; moveTo(350,230); ; //beginPath(); StrokeStyle=#000; lineWidth=2; fillStyle=#fff; moveTo(300,292); lineTo(295,272); lineTo(320,271); //rect(297,252,20,20); fill(); closePath(); //beginPath(); lineWidth=3; ); closePath(); BeginPath(); StrokeStyle=#000; lineWidth=2; bezierCurveTo(205,225,205,215,220,220); closePath(); //nez startPath(); traitStyle=#000; lineWidth=3; moveTo(290,215); BeginPath(); StrokeStyle=#cb662e; lineWidth=2; shadowOffsetX = 0; shadowOffsetY = -3; shadowBlur = 10; closePath(); //taches de rousseur beginPath(); fill(); closePath(); startPath(); fillStyle=#bf7627; arc(210,214,2,0,Math.PI*2,true); fill(); closePath(); fillStyle=#bf7627; arc(218,207,2,0,Math.PI*2,true) ; fill(); closePath(); startPath(); fillStyle=#bf7627; arc(367,205,2,0,Math.PI*2,true); fill(); closePath(); fillStyle=#bf7627; ; fill(); closePath(); startPath(); fillStyle=#bf7627; arc(380,213,2,0,Math.PI*2,true); fill(); //chaussures//left StrokeStyle=#000; fillStyle=#000; = #000 ; shadowOffsetX = 0 ; shadowOffsetY = 0 ; arc(180,577,11,0,Math.PI*2,true); bezierCurveTo(185,560,197,575,207,560); moveTo(207,560); quadraticCurveTo(197,580,180,585); quadraticCurveTo(207,561,185,570); rect(207,585,10,4) trait(); //ctx.rotate( m * Math.PI / 180) closePath(); ; traitStyle=#000; fillStyle=#000; lineWidth=4; shadowColor = #000; shadowOffsetY = 0; shadowBlur = 0; moveTo(378,560); lineTo(368,560); quadraticCurveTo(358,570,368,585); quadraticCurveTo(388,580,405,585); Stroke(); fill(); //ctx.rotate( m * Math.PI / 180) closePath(); //point blanc startPath(); ctx, 160, 100, 10, 15); EvenCompEllipse(ctx, 150, 150, 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(); //Sélectionnez le plus grand de a et b comme arc Le rayon paramètre de la méthode var r = (a > b) ? a : b; var ratioX = a / r //Rapport de mise à l'échelle de l'axe horizontal var ratioY = b / r; //Rapport de mise à l'échelle de l'axe vertical ctx.scale(ratioX, ratioY); //Échelle (compression uniforme) ctx.beginPath(); //Dessinez dans le sens inverse des aiguilles d'une montre à partir de l'extrémité gauche de l'ellipse ctx.moveTo((x + a) / ratioX, y / ratioY); ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI.closePath(); ctx.AVC(); ctx.fill(); ctx.restore(); </script></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.