Saya telah mempelajari kanvas baru-baru ini dan hanya menggunakan kanvas untuk menggambar karakter kartun - SpongeBob SquarePants.
Gambarnya adalah sebagai berikut:
Kodenya adalah sebagai berikut:
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>kanvas Spongebob</title> </head> <body> <kanvas id=lebar kanvas=1000 tinggi=700 gaya= latar belakang : #01539f;></canvas> </body> <skrip> var canvas = document.getElementById(canvas); kanvas.getContext(2d); dengan(ctx){ //lengan//kiri BeginPath(); fillStyle=#fff; strokeStyle=#000; ); closePath(); //kanan startPath(); fillStyle=#fff; strokeStyle=#000; //Lengan//Kiri BeginPath(); fillStyle=#f5e261; strokeStyle=#000; lineWidth=2; moveTo(122,306); garisKe(110,406); ); closePath(); //kanan mulaiPath(); fillStyle=#f5e261; strokeStyle=#000; moveTo(458.306); garisKe(470.406); garisKe(480.406); garisKe(468.306); pakaian mulaiPath(); fillStyle=#fff; strokeStyle=#000; lebar garis=5; bayanganWarna = #000; bayanganOffsetX = 0; bayanganOffsetY = 0; bayanganBlur = 0; langkahKe(145,385); (); //Celana mulaiPath(); fillStyle=#ae6f28; strokeStyle=#000; moveTo(146.427); lineTo(147.470); lineTo(441.470); lineTo(442.427); gaya isi=#000; rect(156,438,60,15); rect(236,438,120,15); rect(373,438,60,15); closePath(); ; lebar garis=2; pindah ke(190,472); barisKe(190,490); barisKe(235,490); barisKe(235,472); barisKe(350,472); barisKe(350,490); //Kaki mulaiPath(); gaya isi=#fffe71; strokeStyle=#000; lebar garis=2; pindahKe(208.491); barisKe(208.516); barisKe(378.516); (); stroke(); closePath(); //kaus kaki mulaiPath(); fillStyle=#fff; strokeStyle=#000; lineWidth=2; moveTo (368.517); barisKe(368.560); barisKe(379,560); barisKe(378,517); isi(); lebar baris=4; pindahKe(208,523); (368.523); barisKe(378.523); stroke(); closePath(); //Bilah merah mulaiPath(); strokeStyle=#da4751; lineWidth=4; moveTo(209.530); closePath (); //Ikat BeginPath(); strokeStyle=#000; lebar garis=5; gaya isi=#ef4641; pindah Ke(270,385); barisKe(320,385); barisKe(280,446); lineTo(310,446); lineTo(298,415); strokeStyle=#fff; (218.385); pindah Ke(310.393); lineTo(325,410); lineTo(362,385); fillStyle=#f5e262; ,50); squareCurveTo(170,40,180,50); quadraticCurveTo(190,60,200,50); quadraticCurveTo(250,40,260,50); squareCurveTo(270,60,280,50); quadraticCurveTo(290,40,300,50); quadraticCurveTo(350,60,360,50); squareCurveTo(370,40,380,50); quadraticCurveTo(390,60,400,50); quadraticCurveTo(450,40,460,50); KurvaKekuadrat(465,60,460,70); KurvaKuadratKe(450,80,460,90); squareCurveTo(466.140.456.150); quadraticCurveTo(444.160.454.170); quadraticCurveTo(464.180.454.190); squareCurveTo(462.220.452.230); quadraticCurveTo(440.240.450.250); quadraticCurveTo(460.260.450.270); squareCurveTo(458.300.448.310); quadraticCurveTo(436.320.446.330); kuadratCurveTo(456.340.446.350); squareCurveTo(454.380.444.390); quadraticCurveTo(435.405.424.390); quadraticCurveTo(415.380.405.390); squareCurveTo(375.380.365.390); quadraticCurveTo(355.400.345.390); kuadratCurveTo(335.380.325.390); squareCurveTo(295.380.285.390); quadraticCurveTo(275.400.265.390); quadraticCurveTo(255.380.245.390); squareCurveTo(215,380,205,390); quadraticCurveTo(195,400,185,390); KurvaKekuadrat(135,380,145,370); squareCurveTo(131.300.141.290); quadraticCurveTo(149.280.139.270); quadraticCurveTo(129.260.139.250); squareCurveTo(127,220,137,210); quadraticCurveTo(145,200,135,190); squareCurveTo(123,140,133,130); quadraticCurveTo(141,120,131,110); quadraticCurveTo(121,100,131,90); quadraticCurveTo(119,60,129,50); quadraticCurveTo(137,45,140,50); stroke(); closePath(); ,45,0,Matematika.PI*2,benar); arc(341,180,45,0,Math.PI*2,true); fillStyle=#50d1f1; ,0,Matematika.PI*2,benar); stroke(); isi(); strokeStyle=#000; fillStyle=#50d1f1; arc(335,180,18,0,Math.PI*2,true); ; gaya isi=#000; arc(255,180,10,0,Matematika.PI*2,goresan(); isi(); closePath(); startPath(); strokeStyle=#000; fillStyle=#000; arc(335,180,10,0,Math.PI*2,stroke(); ; //bulu mata mulaiPath(); lebar garis=6; strokeStyle=#000; barisKe(223.142); pindahKe(247.112); barisKe(247.133); pindahKe(283.117); barisKe(344.112); moveTo(380,120); lineTo(365,140); strokeStyle=#ca5939; moveTo(190,230); ; stroke(); ; //beginPath(); gaya stroke=#000; Lebar garis=2; gaya isi=#fff; pindahKe(275,272); garisKe(320,271); //persegi(297,252,20,20); isi(); garisCurveTo(210,220,290,340,380,220); ); strokeStyle=#000; garisLebar=2; bezierCurveTo(205,225,205,215,220,220); closePath(); //hidung mulaiPath(); strokeStyle=#000; lebar garis=3; fillStyle=#f5e262; stroke(); mulaiPath(); strokeStyle=#cb662e; lebar garis=2; bezierCurveTo(250.305.270.330.290.310); quadraticCurveTo(300.305.310.310); shadowOffsetX = 0; shadowOffsetY = -3; shadowBlur = 10; stroke(); closePath(); //bintik-bintik mulaiPath(); isi(); closePath(); startPath(); gaya isi=#bf7627; arc(210,214,2,0,Matematika.PI*2,benar); isi(); closePath();beginPath(); fillStyle=#bf7627; ; isi(); closePath(); mulaiPath(); arc(367,205,2,0,Matematika.PI*2,benar); isi(); closePath();beginPath(); fillStyle=#bf7627; ; isi(); closePath(); mulaiPath(); arc(380,213,2,0,Math.PI*2,true); fill(); closePath(); //sepatu//kiri BeginPath(); strokeStyle=#000; = #000; bayanganOffsetX = 0; bayanganOffsetY = 0; arc(180.577.11,0,Matematika.PI*2,benar); bezierCurveTo(185.560.197.575.207.560); moveTo(207.560); lineTo(217.560); quadraticCurveTo(197,580,180,585); quadraticCurveTo(207,561,185,570); rect(207,585,10,4) stroke(); //ctx.rotate( m * Math.PI / 180) closePath(); ; gaya isi=#000; lebar garis=4; bayanganWarna = #000; bayanganOffsetX = 0; bayanganOffsetY = 0; bayanganBlur = 0; moveTo(378.560); lineTo(368.560); quadraticCurveTo(358.570.368.585); quadraticCurveTo(368.580.405.585); stroke(); isi(); //ctx.rotate( m * Math.PI / 180) closePath(); //titik putih startPath(); strokeStyle=#f5e262; 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(); //Pilih yang lebih besar dari a dan b sebagai radius busur parameter metode var r = (a > b) ? a : b; var rasioX = a / r; //Rasio penskalaan sumbu horizontal var rasioY = b / r; //Rasio penskalaan sumbu vertikal ctx.scale(ratioX, ratioY); //Skala (kompresi seragam) ctx.beginPath(); //Gambar berlawanan arah jarum jam mulai dari titik akhir kiri elips ctx.moveTo((x + a) / rasioX, y / rasioY); ctx.arc(x / rasioX, y / rasioY, r, 0, 2 * Math.PI); ctx.stroke(); ctx.isi(); ctx.restore();Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.