He estado estudiando lienzos recientemente y simplemente lo usé para dibujar un personaje de dibujos animados: Bob Esponja.
La imagen es la siguiente:
El código es el siguiente:
<!DOCTYPE html><html> <cabeza> <meta charset=utf-8 /> <título>lienzo Bob Esponja</título> </cabeza> <cuerpo> <lienzo id=lienzo ancho=1000 alto=700 estilo= fondo : #01539f;></canvas> </body> <script> var lienzo = document.getElementById(canvas) var ctx = canvas.getContext(2d); with(ctx){ //manga//left beginPath(); fillStyle=#fff; StrokeStyle=#000; lineWidth=2; ); closePath(); //right beginPath(); fillStyle=#fff; trazoStyle=#000; lineWidth=2; //Arm//Izquierda comenzarPath(); fillStyle=#f5e261; lineTo(120,406); lineTo(132,306); ); cerrarPath(); //Derecha comenzarPath(); fillStyle=#f5e261; trazoStyle=#000; moveTo(458,306); lineTo(470,406); lineTo(480,406); ropa comenzarPath(); fillStyle=#fff; lineWidth=5; sombraColor = #000; líneaTo(146,425); líneaA(443,385); (); //Pantalones comienzanPath(); fillStyle=#ae6f28; trazoStyle=#000; moveTo(146,427); lineTo(147,470); lineTo(441,470); lineTo(442,427); fillStyle=#000; rect(156,438,60,15); rect(236,438,120,15); rect(373,438,60,15); fill(); //empezar la pierna del pantalón(); ; ancho de línea = 2; mover a (190,472); líneaA(190,490); líneaA(235,490); líneaA(350,472); líneaA(350,490); líneaA(395,472); comenzarPath(); fillStyle=#fffe71; estilo de trazo = # 000; ancho de línea = 2; mover a (208,491); línea a (368,516); línea a (378,491); (); trazo(); cerrarPath(); //calcetines comenzarPath(); lineTo(207,560); lineTo(218,517); (368,517); líneaA(368,560); lineTo(379,560); lineTo(378,517); fill(); moveTo(208,523); (368,523); líneaA(378,523); trazo(); cerrarPath(); //Barra roja comenzarPath(); moveTo(369,530); (); //Atar beginPath(); StrokeStyle=#000; lineWidth=5; fillStyle=#ef4641; líneaA(270,385); líneaA(298,413); líneaA(295,462); lineTo(310,446); lineTo(298,415); trazo(); closePath(); //collar comenzarPath(); lineTo(265,410); (218,385); mover a (310,393); lineTo(325,410); lineTo(362,385); trazo(); closePath(); //cara comenzarPath(); fillStyle=#f5e262; ,50); curva cuadrática a (170,40,180,50); curva cuadrática a (230,60,240,50); curva cuadrática a (250,40,260,50); curva cuadrática a (270,60,280,50); curva cuadrática a (330,40,340,50); curva cuadrática a (350,60,360,50); curva cuadrática a (370,40,380,50); curva cuadrática a (430,60,440,50); curva cuadrática a (450,40,460,50); curva cuadrática a (465,60,460,70); curva cuadrática a (450,80,460,90); curva cuadrática a (468,100,458,110); curva cuadrática a (466,140,456,150); curva cuadrática a (444,160,454,170); curva cuadrática a (464,180,454,190); curva cuadrática a (462,220,452,230); curva cuadrática a (440,240,450,250); curva cuadrática a (460,260,450,270); curva cuadrática a (458,300,448,310); curva cuadrática a (436,320,446,330); curva cuadrática a (456,340,446,350); curva cuadrática a (454,380,444,390); curva cuadrática a (435,405,424,390); curva cuadrática a (415,380,405,390); curva cuadrática a (375,380,365,390); curva cuadrática a (355,400,345,390); curva cuadrática a (335,380,325,390); curva cuadrática a (295,380,285,390); curva cuadrática a (275,400,265,390); curva cuadrática a (255,380,245,390); curva cuadrática a (215,380,205,390); curva cuadrática a (195,400,185,390); curva cuadrática a (175,380,165,390); curva cuadrática a (135,380,145,370); curva cuadrática a (153,360,143,350); curva cuadrática a (133,340,143,330); curva cuadrática a (131,300,141,290); curva cuadrática a (149,280,139,270); curva cuadrática a (129,260,139,250); curva cuadrática a (127,220,137,210); curva cuadrática a (145,200,135,190); curva cuadrática a (125,180,135,170); curva cuadrática a (123,140,133,130); curva cuadrática a (141,120,131,110); curva cuadrática a (121,100,131,90); quadraticCurveTo(119,60,129,50); quadraticCurveTo(137,45,140,50); trazo(); closePath(); //ojo comenzarPath(); ,45,0,Math.PI*2,verdadero); arc(341,180,45,0,Math.PI*2,true); trazo(); closePath(); //beginPath(); ,0,Math.PI*2,verdadero); trazo(); llenar(); closePath(); trazoStyle=#000; fillStyle=#50d1f1; arc(335,180,18,0,Math.PI*2,true); trazo(); closePath(); ; fillStyle=#000; arc(255,180,10,0,Math.PI*2,true()); llenar(); cerrarPath(); trazoStyle=#000; fillStyle=#000; closePath(); ; //pestañas comenzarPath(); lineWidth=6; trazoStyle=#000; líneaA(223,142); moverA(247,112); líneaA(247,133); moverA(344,112); moveTo(380,120); lineTo(365,140); trazo(); closePath(); //esquina de la boca comenzarPath(); bezierCurveTo(160,175,265,190,230,230) ; trazo(); cerrarPath(); comenzarPath(); fillStyle=#fdd06b lineWidth=3; trazo(); ; //comenzarRuta(); estilo de trazo = # 000; ancho de línea = 2; estilo de relleno = #fff; mover a (275,272); línea a (300,292); lineTo(320,271); //rect(297,252,20,20); lineWidth=3; closePath(); //beginPath(); trazo ); cerrarRuta(); comenzarRuta(); trazoStyle=#000; lineWidth(); bezierCurveTo(205,225,205,215,220,220); bezierCurveTo(370,220,380,215,385,225); closePath(); //nariz comenzarPath(); bezierCurveTo(265,170,340,185,300,225); comenzarPath(); trazoStyle=#cb662e; lineWidth=2; bezierCurveTo(250,305,270,330,290,310); quadraticCurveTo(300,305,310,310); ShadowOffsetX = 0; ShadowOffsetY = -3; ShadowBlur = 10; closePath(); //pecas comenzarPath(); llenar(); cerrarPath(); comenzarPath(); llenarStyle=#bf7627; arc(210,214,2,0,Math.PI*2,verdadero); fill(); closePath(); comenzarPath(); fillStyle=#bf7627; ; llenar(); cerrarPath(); comenzarPath(); llenarStyle=#bf7627; arc(367,205,2,0,Math.PI*2,verdadero); fill(); closePath(); comenzarPath(); fillStyle=#bf7627; ; llenar(); cerrarPath(); comenzarPath(); llenarStyle=#bf7627; arc(380,213,2,0,Math.PI*2,true); fill(); closePath(); //zapatos de cuero//left BeginPath(); fillStyle=#000; color de sombra = #000; desenfoque de sombraX = 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) trazo(); //ctx.rotate( m * Math.PI / 180) closePath(); ; estilo de trazo=#000; fillStyle=#000; lineWidth=4; ShadowColor = #000; ShadowOffsetX = 0; bezierCurveTo(400,560,388,575,378,560); moverA(378,560); líneaA(368,560);Curva cuadráticaA(358,570,368,585); rect(368,585,10,4); trazo(); relleno(); //ctx.rotate( m * Math.PI / 180) closePath(); //punto blanco comenzarPath(); trazoEstilo=#c4b127; ctx, 160, 100, 10, 15); 5, 7); , 12) EvenCompEllipse(ctx, 380, 340, 6, 9) closePath(); } function EvenCompEllipse(ctx, x, y, a, b) { ctx.save() //Selecciona el mayor de a y b como arco El radio parámetro del método var r = (a > b) ? a : b; var ratioX = a / r //Relación de escala del eje horizontal var ratioY = b / r; //Relación de escala del eje vertical ctx.scale(ratioX, ratioY); //Escala (compresión uniforme) ctx.beginPath(); //Dibuja en sentido antihorario desde el extremo izquierdo de la elipse ctx.moveTo((x + a) / ratioX , y / ratioY); ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PIth(); ctx.stroke(); ctx.fill(); ctx.restore();Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.