لقد كنت أدرس القماش مؤخرًا واستخدمت القماش ببساطة لرسم شخصية كرتونية - سبونج بوب سكوير بانتس.
الصورة هي كما يلي:
الرمز هو كما يلي:
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>قماش سبونج بوب</title> </head> <body> <canvas id=canvas width=1000 height=700 style= الخلفية : #01539f;></canvas> </body> <script> var Canvas = document.getElementById(canvas var ctx = Canvas.getContext(2d); with(ctx){ //sleeve//left beginPath();strokeStyle=#000; ); // right beginPath();strokeStyle=#000; //Arm// LeftPath(); fillStyle=#f5e261; lineWidth=2; ); fillStyle=#f5e261; clothes beginPath(); fillStyle=#fff; lineWidth=5; ()؛ fillStyle=#ae6f28; fillStyle=#000; rect(156,438,60,15); ; lineTo(190,490); lineTo(235,472); moveTo(350,490); beginPath(); fillStyle=#fffe71; lineTo(378,491); ()؛ Stroke(); //socks beginPath(); (368,517); lineTo(379,560); (368,523); Stroke(); // الشريط الأحمر beginPath(); lineWidth=4; ()؛ lineWidth=5; lineTo(310,446); (218,385); lineTo(325,410); ، 50)؛ QuadraticCurveTo(170,40,180,50); QuadraticCurveTo(190,60,200,50); QuadraticCurveTo(270,60,280,50); QuadraticCurveTo(290,40,300,50); QuadraticCurveTo(370,40,380,50); QuadraticCurveTo(390,60,400,50); QuadraticCurveTo(465,60,460,70); QuadraticCurveTo(450,80,460,90); QuadraticCurveTo(466,140,456,150); QuadraticCurveTo(444,160,454,170); QuadraticCurveTo(462,220,452,230); QuadraticCurveTo(440,240,450,250); QuadraticCurveTo(458,300,448,310); QuadraticCurveTo(436,320,446,330); QuadraticCurveTo(454,380,444,390); QuadraticCurveTo(435,405,424,390); QuadraticCurveTo(375,380,365,390); QuadraticCurveTo(355,400,345,390); QuadraticCurveTo(295,380,285,390); QuadraticCurveTo(215,380,205,390); QuadraticCurveTo(195,400,185,390); QuadraticCurveTo(135,380,145,370); QuadraticCurveTo(153,360,143,350); QuadraticCurveTo(131,300,141,290); QuadraticCurveTo(149,280,139,270); QuadraticCurveTo(127,220,137,210); QuadraticCurveTo(145,200,135,190); QuadraticCurveTo(123,140,133,130); QuadraticCurveTo(141,120,131,110); QuadraticCurveTo(119,60,129,50); ,45,0,Math.PI*2,true); arc(341,180,45,0,Math.PI*2,true); fill(); ClosePath(); ,0,Math.PI*2,true); StrokeStyle=#000; fillStyle=#50d1f1; arc(335,180,18,0,Math.PI*2,true); ; fill(); beginPath();strokeStyle=#000; //الرموش تبدأPath(); lineTo(223,142); lineTo(247,133); lineTo(270,140); moveTo(380,120); ; block(); //بدء المسار () ؛ lineTo(320,292); lineTo(320,271); //rect(297,252,20,20); ); StrokeStyle=#000; // أنف beginPath(); lineWidth=3; fillStyle=#f5e262; beginPath(); StrokeStyle=#cb662e lineWidth=2 bezierCurveTo(250,305,330,290,310); ShadowOffsetX = 0; fill(); beginPath(); arc(210,214,2,0,Math.PI*2,true); ClosePath(); beginStyle=#bf7627; fillStyle(); arc(367,205,2,0,Math.PI*2,true); ClosePath(); beginStyle=#bf7627; fillStyle(); arc(380,213,2,0,Math.PI*2,true); ClosePath();//left beginPath(); = #000; arc(180,577,11,0,Math.PI*2,true bezierCurveTo(185,560,197,575,207,560); QuadraticCurveTo(197,580,180,585); ; fillStyle=#000; this.moveTo(378,560); lineTo(368,560); Stroke(); //ctx.rotate( m * Math.PI / 180) ClosePath(); ctx, 160, 100, 10, 15); 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(); // حدد أكبر نصف قطر لـ a و b معلمة الطريقة var r = (a > b) ? a : var نسبةX = a / r; // نسبة قياس المحور الرأسي ctx.scale(ratioX,نسبةY); //المقياس (الضغط الموحد) ctx.beginPath(); // ارسم عكس اتجاه عقارب الساعة بدءًا من نقطة النهاية اليسرى للقطع الناقص ctx.moveTo((x + a) / نسبة X، ص / نسبة Y)؛ ctx.arc(x / نسبة X، ص / نسبة Y، r، 0، 2 * Math. PI)؛ ctx.stroke(); ctx.fill(); ctx.restore() };ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.