ฉันเพิ่งศึกษาผืนผ้าใบเมื่อเร็ว ๆ นี้และใช้ผืนผ้าใบในการวาดตัวการ์ตูน - SpongeBob SquarePants
รูปภาพมีดังนี้:
รหัสมีดังนี้:
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>canvas Spongebob</title> </head> <body> <canvas id=canvas width=1000 height=700 style= background : #01539f;></canvas> </body> <script> var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); with(ctx){ //sleeve//left beginningPath(); fillStyle=#000; lineWidth=2; bezierCurveTo(142,253,112,263,112,303) จังหวะ(120,308,150,303) ); closePath(); //fillStyle=#fff; strokeStyle=#000; lineWidth=2; bezierCurveTo(445,253,477,263,477,303) เติมกำลังสอง //Arm//LeftBeginPath(); lineTo(132,306); lineTo(132,306); ); closePath(); // ขวา beginningPath(); fillStyle=#f5e261; lineTo(468,306); fillTo(470,406); lineTo(468,306); เสื้อผ้า beginningPath(); fillStyle=#fff; lineWidth=5; shadowColor = #000; shadowOffsetX = 0; shadowBlur = 0; (); //กางเกง beginningPath(); fillStyle=#ae6f28; strokeStyle=#000; closePath(); เติมสไตล์=#000; ตรง (156,438,60,15); ตรง (236,438,120,15); กรอก (373,438,60,15); closePath(); ; lineWidth=2; ย้ายไป(190,472); lineTo(350,490); lineTo(395,472); lineTo(350,490); BeginPath(); fillStyle=#fffe71; strokeStyle=#000; lineTo(368,491); lineTo(378,516); lineTo(378,491); (); stroke(); closePath(); //socks beginningPath(); lineTo(218,560); lineTo(218,517); (368,517); เส้นถึง(368,560); lineTo(379,560); lineTo(378,517); fillTo(218,523); lineTo(218,523); (368,523); เส้นถึง(378,523); stroke(); closePath(); // แถบสีแดง beginningPath(); lineTo(378,530); (); //Tie beginningPath(); strokeStyle=#000; lineWidth=5; fillStyle=#ef4641; lineTo(292,415); lineTo(292,415); lineTo(310,446); lineTo(298,415); lineTo(265,410); (218,385); ย้ายไป (310,393); lineTo(325,410); lineTo(362,385); fill(); closePath(); strokeStyle=#f5e262; lineWidth=5; ,50); กำลังสองCurveTo(170,40,180,50); quadraticCurveTo(230,60,240,50); กำลังสองCurveTo(270,60,280,50); quadraticCurveTo(330,40,340,50); กำลังสองCurveTo(370,40,380,50); quadraticCurveTo(430,60,440,50); quadraticCurveTo(450,40,420,50); กำลังสองCurveTo(465,60,460,70); กำลังสองCurveTo(450,80,460,90); กำลังสองCurveTo(468,100,458,110); กำลังสองCurveTo(464,140,456,150); กำลังสองCurveTo(444,160,454,170); กำลังสองCurveTo(462,220,452,230); กำลังสองCurveTo(438,240,450,250); กำลังสองCurveTo(458,300,448,310); กำลังสองCurveTo(434,360,444,330); กำลังสองCurveTo(454,380,444,390); quadraticCurveTo(435,405,424,390); กำลังสองCurveTo(375,380,365,390); quadraticCurveTo(355,400,345,390); กำลังสองCurveTo(295,380,285,390); quadraticCurveTo(275,400,265,390); กำลังสองCurveTo(175,380,165,390); กำลังสองCurveTo(155,400,185,390); กำลังสองCurveTo(135,380,145,370); quadraticCurveTo(153,360,143,350); กำลังสองCurveTo(131,300,141,290); quadraticCurveTo(149,280,139,270); กำลังสองCurveTo(127,220,137,210); กำลังสองCurveTo(145,200,135,190); กำลังสองCurveTo(125,180,135,170); กำลังสองCurveTo(123,140,133,130); quadraticCurveTo(139,80,129,70); quadraticCurveTo(119,60,129,50); quadraticCurveTo(137,45,140,50); จังหวะ(); closePath(); ,45,0,คณิตศาสตร์.PI*2,จริง); ส่วนโค้ง (341,180,45,0,Math.PI*2,จริง); จังหวะ(); closePath(); //beginPath(); fillStyle=#50d1f1; ,0,Math.PI*2,จริง); จังหวะ(); closePath(); strokeStyle=#000; fillStyle=#50d1f1; arc(335,180,18,0,Math.PI*2,true); เติม(); ; fillStyle=#000; ส่วนโค้ง(255,180,10,0,Math.PI*2,จริง); เติม(); closePath(); strokeStyle=#000; fillStyle=#000; ; //ขนตา beginningPath(); lineWidth=6; strokeStyle=#000; เส้นถึง(223,142); เส้นถึง(247,112); เส้นถึง(344,112); moveTo(380,120); lineTo(365,140); closePath(); bezierCurveTo(160,175,265,190,230,230) ; จังหวะ(); closePath(); fillStyle=#ca5939; closePath() ; //beginPath(); strokeStyle=#000; lineWidth=2; fillStyle=#fff; lineTo(275,292); lineTo(320,292); lineTo(320,271); //rect(297,252,20,20); เติม (); closePath(); //beginPath(); ); closePath(); startPath(); strokeStyle=#000; lineWidth=2; bezierCurveTo(370,220,380,215,385,225); closePath(); //nose beginningPath(); strokeStyle=#000; lineWidth=3; fillStyle=#f5e262; closePath(); startPath(); strokeStyle=#cb662e; lineWidth=2; bezierCurveTo(250,305,270,330,290,310); shadowColor = #cb662e; shadowOffsetX = 0; shadowOffsetY = -3; shadowBlur = 10; closePath(); //fillStyle=#bf7627; เติม(); closePath(); beginningPath(); fillStyle=#bf7627; ส่วนโค้ง (210,214,2,0,Math.PI*2,true); fill(); closePath(); fillStyle=#bf7627; ; เติม(); closePath(); ส่วนโค้ง (367,205,2,0,Math.PI*2,true); fill(); closePath(); fillStyle=#bf7627; ; เติม(); closePath(); ส่วนโค้ง (380,213,2,0,Math.PI*2,true); fill(); closePath(); //shoesbeginPath(); = #000; shadowOffsetX = 0; shadowOffsetY = 0; ส่วนโค้ง (180,577,11,0,Math.PI*2,จริง); bezierCurveTo(185,560,197,575,207,560); quadraticCurveTo (197,580,180,585); quadraticCurveTo (207,561,185,570) ตรง (207,585,10,4) จังหวะ (); ; จังหวะสไตล์=#000; fillStyle=#000; lineWidth=4; shadowColor = #000; shadowOffsetY = 0; shadowBlur = 0; moveTo(378,560); lineTo(368,560); quadraticCurveTo(358,570,368,585); quadraticCurveTo(368,580,405,585); จังหวะ(); เติม(); //ctx.rotate( m * Math.PI / 180) closePath(); // white point beginningPath(); ctx, 160, 100, 10, 15); เลขคู่(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(); } ฟังก์ชัน EvenCompEllipse(ctx, x, y, a, b) { ctx.save(); //เลือกส่วนที่ใหญ่กว่าของ a และ b เป็นส่วนโค้ง พารามิเตอร์ของวิธีการ var r = (a > b) ? a : b; var ratioX = a / r; // อัตราส่วนสเกลแกนแนวนอน var ratioY = b / r; //อัตราส่วนสเกลแกนแนวตั้ง ctx.scale(ratioX, ratioY); //Scale (การบีบอัดแบบสม่ำเสมอ) ctx.beginPath(); //วาดทวนเข็มนาฬิกาโดยเริ่มจากจุดสิ้นสุดด้านซ้ายของวงรี ctx.moveTo((x + a) / ratioX, y / ratioY); ctx.arc(x / ratioX, y / อัตราส่วนY, r, 0, 2 * Math.PI); ctx.จังหวะ(); ctx.fill(); ctx.restore(); };ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network