Tenho estudado tela recentemente e simplesmente usei tela para desenhar um personagem de desenho animado - Bob Esponja Calça Quadrada.
A imagem é a seguinte:
O código é o seguinte:
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>canvas Bob Esponja</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){ //manga//beginPath(); fillStyle=#fff; lineWidth=2; ); closePath(); //bezierPath(); quadraticCurveTo(467,308,447,303) fill(); //Arm//Esquerda BeginPath(); fillStyle=#f5e261; lineTo(132,306); ); closePath(); //começarCaminho(); fillStyle=#f5e261; traçoStyle=#000; moveTo(458.306); lineTo(470.406); roupas BeginPath(); lineWidth=5; shadowColor = #000; shadowOffsetX = 0; shadowBlur = 0; (); //Calças startPath(); fillStyle=#ae6f28; strokeStyle=#000; moveTo(146,427); lineTo(147,470); fillStyle=#000; rect(156,438,60,15); //perna da calça fillStyle=#ae6f28; ;LinhaLargura=2; lineTo(190.490); lineTo(395.490); lineTo(395.472); startPath(); fillStyle=#ffe71; traçoStyle=#000; lineWidth=2; lineTo(368.516); (); acidente vascular cerebral(); closePath(); //meias startPath(); lineTo(218,560); (368.517); lineTo(379.560); lineTo(378.517); lineWidth=4; (368.523); acidente vascular cerebral(); closePath(); //barra vermelha começarPath(); lineTo(378,530); (); //Amarre BeginPath(); lineWidth=5; lineTo(292.413); lineTo(310.446); lineTo(298.415); fillTo(280.393); (218.385); lineTo(325,410); lineTo(362,385); fill(); bezierCurveTo(140,50,150,60,160; ,50); quadráticaCurveTo(170,40,180,50); quadráticaCurveTo(230,60,240,50); quadráticaCurveTo(270,60,280,50); quadráticaCurveTo(330,40,340,50); quadráticaCurveTo(370,40,380,50); quadráticaCurveTo(390,60,400,50); quadráticaCurveTo(465,60,460,70); quadráticaCurveTo(450,80,460,90); quadráticaCurveTo(466.140.456.150); quadráticaCurveTo(444.160.454.170); quadráticaCurveTo(462.220.452.230); quadráticaCurveTo(440.240.450.250); quadráticaCurveTo(458.300.448.310); quadráticaCurveTo(436.320.446.330); quadráticaCurveTo(454.380.444.390); quadráticaCurveTo(435.405.424.390); quadráticaCurveTo(375.380.365.390); quadráticaCurveTo(355.400.345.390); quadráticaCurveTo(295.380.285.390); quadráticaCurveTo(275.400.265.390); quadráticaCurveTo(215.380.205.390); quadráticaCurveTo(195.400.185.390); quadráticaCurveTo(135.380.145.370); quadráticaCurveTo(153.360.143.350); quadráticaCurveTo(131.300.141.290); quadráticaCurveTo(149.280.139.270); quadráticaCurveTo(127.220.137.210); quadráticaCurveTo(145.200.135.190); quadráticaCurveTo(123.140.133.130); quadráticaCurveTo(141.120.131.110); quadraticCurveTo(119,60,129,50); quadraticCurveTo(137,45,140,50); fillStyle=#fff; ,45,0,Math.PI*2,verdadeiro); arco(341,180,45,0,Math.PI*2,true); preenchimento(); ,0,Math.PI*2,true); acidente vascular cerebralStyle=#000; fillStyle=#50d1f1; //eyeball crawlStyle=#000; ;fillStyle=#000;arco(255,180,10,0,Math.PI*2,true); fill(); closePath(); ; //cílios startPath(); lineWidth=6; linhaPara(223.142); linhaPara(307.120); moveTo(380,120); lineTo(365,140); closePath(); bezierCurveTo(160,175,265,190,230,230); ; traço(); closePath(); fillPath(); ; //beginPath(); traçoStyle=#000;lineWidth=2;lineTo(295.272); lineTo(320,271); //rect(297,252,20,20); fill(); closePath(); ); closePath(); traçoStyle=#000; bezierCurveTo(205,225,205,215,220,220); closePath(); closePath(); //nose BeginPath(); começarPath(); acidente vascular cerebralStyle=#cb662e;lineWidth=2; quadraticCurveTo(330.330.350.310); shadowOffsetX = 0; shadowOffsetY = -3; shadowBlur = 10; closePath(); fill(); closePath(); arc(210,214,2,0,Math.PI*2,true); closePath(); ; fill(); closePath(); arc(367,205,2,0,Math.PI*2,true); closePath(); ; fill(); closePath(); arc(380,213,2,0,Math.PI*2,true); fill(); lineWidth=4; = #000;shadowOffsetX = 0; arco(180.577,11,0,Math.PI*2,true); bezierCurveTo(185.560.197.575.207.560); quadraticCurveTo(197,580,180,585); quadraticCurveTo(207,561,185,570); rect(207,585,10,4) acidente vascular cerebral(); ; estilo_traço=#000; fillStyle=#000; lineWidth=4; shadowColor = #000; shadowOffsetX = 0; moveTo (378.560); acidente vascular cerebral(); //ctx.rotate( m * Math.PI / 180) closePath(); 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(); parâmetro do método var r = (a > b) ? a : b var ratioX = a / r; //Proporção de escala do eixo vertical ctx.scale(ratioX, ratioY); //Escala (compressão uniforme) ctx.beginPath(); //Desenhe no sentido anti-horário a partir do ponto final esquerdo da elipse ctx.moveTo((x + a) / proporçãoX, y / proporçãoY); ctx.stroke(); ctx.fill();O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.