canvas简易绘图的实现（海绵宝宝篇）

更新时间:2023-04-06 10:14:20 阅读：评论：0
最近在研究canvas，简单的用canvas绘制了一下卡通人物–海绵宝宝。
图片如下：
代码如下：
<!doctype html><html><head><meta chart="utf-8" /><title>canvas海绵宝宝</title></head><bo回族女人的第一晚上dy><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){//袖子//左beginpath();fillstyle="#fff";strokestyle="#000";linewidth=2;beziercurveto(142,253,112,263,112,303)quadraticcurveto(120,308,150,303)fill();stroke();clopath();//右beginpath();fillstyle="#fff";strokestyle="#000";linewidth=2;beziercurveto(445,253,477,263,477,303)quadraticcurveto(467,308,447,303)fill();stroke();clopath();//胳膊//左beginpath();fillstyle="#f5e261";strokestyle="#000";linewidth=2;moveto(122,306);lineto(110,406);lineto(120,406);lineto(132,306);fill();stroke();clopath();//右beginpath();fillstyle="#f5e261";strokestyle="#000";moveto(458,306);lineto(470,406);lineto(480,406);lineto(468,306);fill();stroke();clopath();//手//左//衣服beginpath();fillstyle="#fff";strokestyle="#000";linewidth=5;shadowcolor = "#000"; shadowofftx = 0; shadowoffty = 0; shadowblur = 0; moveto(145,385);lineto(146,425);lineto(442,425);lineto(443,385);stroke();fill();clopath();//裤子beginpath();fillstyle="#ae6f28";strokestyle="#000";moveto(146,427);lineto(147,470);lineto(441,470);lineto(442,427);stroke();fill();clopath();//裤子图案beginpath();fillstyle="#000";rect(156,438,60,15);rect(236,438,120,15);rect(373,438,60,15);fill();clopath();//裤腿beginpath();fillstyle="#ae6f28";strokestyle="#000";linewidth=2;moveto(190,472);lineto(190,490);lineto(235,490);lineto(235,472);moveto(350,472);lineto(350,490);lineto(395,490);lineto(395,472);fill();stroke();clopath();//腿beginpath();fillstyle="#fffe71";strokestyle="#000";linewidth=2;moveto(208,491);lineto(208,516);lineto(218,516);lineto(218,491);moveto(368,491);lineto(368,516);lineto(378,516);lineto(378,491);fill();stroke();clopath();//袜子beginpath();fillstyle="#fff";strokestyle="#000";linewidth=2;moveto(208,517);lineto(207,560);lineto(218,560);lineto(218,517);moveto(368,517);lineto(368,560);lineto(379,560);lineto(378,517);fill();stroke();clopath();//蓝杠beginpath();strokestyle="#536d92";linewidth=4;moveto(208,523);lineto(218,523);moveto(368,523);lineto(378,523);stroke();clopath();//红杠beginpath();strokestyle="#da4751";linewidth=4;moveto(209,530);lineto(218,530);moveto(369,530);lineto(378,530);stroke();clopath();//领带beginpath();strokestyle="#000";linewidth=5;fillstyle="#ef4641";moveto(270,385);lineto(320,385);lineto(298,413);lineto(292,413);lineto(270,385);moveto(292,415);lineto(280,446);lineto(295,462);lineto(310,446);lineto(298,415);stroke();fill();clopath();//领子beginpath();strokestyle="#000";fillstyle="#fff";moveto(280,393);lineto(265,410);lineto(218,385);moveto(310,393);lineto(325,410);lineto(362,385);stroke();fill();clopath();//脸beginpath();strokestyle="#818620";fillstyle="#f5e262";linewidth=5;beziercurveto(140,50,150,60,160,50);quadraticcurveto(170,40,180,50);quadraticcurveto(190,60,200,50);quadraticcurveto(210,40,220,50);quadraticcurveto(230,60,240,50);quadraticcurveto(250,40,260,50);quadraticcurveto(270,60,280,50);quadraticcurveto(290,40,300,50);quadraticcurveto(310,60,320,50);quadraticcurveto(330,40,340,50);quadraticcurveto(350,60,360,50);quadraticcurveto(370,40,380,50);quadraticcurveto(390,60,400,50);quadraticcurveto(410,40,420,50);quadraticcurveto(430,60,440,50);quadraticcurveto(450,4言行举止0,460,50);quadraticcurveto(465,60,460,70);quadraticcurveto(450,80,460,90);quadraticcurveto(468,100,458,110);quadraticcurveto(446,120,456,130);quadraticcurveto(466,140,456,150);quadraticcurveto(444,160,454,170);quadraticcurveto(464,180,454,190);quadraticcurveto(442,200,452,210);quadraticcurveto(462,220,452,230);quadraticcurveto(440,240,450,250);quadraticcurveto(460,260,450,270);quadrati代持股权协议ccurveto(438,280,448,290);quadraticcurveto(458,300,448,310);quadraticcurveto(436,320,446,330);quadraticcurveto(456,340,446,350);quadraticcurveto(434,360,444,370);quadraticcurveto(454,380,444,390);quadraticcurveto(435,405,424,390);quadraticcurveto(415,380,405,390);quadraticcurveto(395,400,385,390);quadraticcurveto(375,380,365,390);quadraticcurveto(355,400,345,390);quadraticcurveto(335,380,325,390);quadraticcurveto(315,400,305,390);quadraticcurveto(295,380,285,390);quadraticcurveto(275,400,265,390);quadraticcurveto(255,380,245,390);quadraticcurveto(235,400,225,390);quadraticcurveto(215,380,205,390);quadraticcurveto(195,400,185,390);quadraticcurveto(175,380,165,390);quadraticcurveto(155,400,145,390);quadraticcurveto(135,380,145,370);quadraticcurveto(153,360,143,350);quadraticcurveto(133,340,143,330);quadraticcurveto(151,320,141,310);quadraticcurveto(131,300,141,290);quadraticcurveto(149,280,139,270);quadraticcurveto(129,260,139,250);quadraticcurveto(147,240,137,230);quadraticcurveto(127,220,137,210);quadraticcurveto(145,200,135,190);quadraticcurveto(125,180,135,170);quadraticcurveto(143,160,133,150);quadraticcurveto(123,140,133,130);quadraticcurveto(141,120,131,110);quadraticcurveto(121,100,131,90);quadraticcurveto(139,80,129,70);quadraticcurveto(119,60,129,50);quadraticcurveto(137,45,140,50);stroke();fill();clopath();//眼睛beginpath();strokestyle="#000";fillstyle="#fff";arc(249,180,45,0,math.pi*2,true);arc(341,180,45,0,math.pi*2,true);stroke();fill();clopath();//眼仁beginpath();strokestyle="#000";fillstyle="#50d1f1";arc(255,180,18,0,math.pi*2,true);stroke();fill();clopath();beginpath();strokestyle="#000";fillstyle="#50d1f1";arc(335,180,18,0,math.pi*2,true);stroke();fill();clopath();//眼球beginpath();strokestyle="#000";fillstyle="#000";arc(255,180,10,0,math.pi*2,true);stroke();fill();clopath();beginpath();strokestyle="#000";fillstyle="#000";arc(335,180,10,0,math.pi*2,true);stroke();fill();clopath();//眼睫毛beginpath();linewidth=6;strokestyle="#000";moveto(210,122);lineto(223,142);moveto(247,112);lineto(247,133);moveto(283,117);lineto(270,140);moveto(307,120);lineto(320,140);move年终总结to(344,112);lineto(344,133);moveto(380,120);lineto(365,140);stroke();clopath();//嘴角beginpath();fillstyle="#fdd06b"linewidth=3;strokestyle="#ca5939";moveto(190,230);beziercurveto(160,175,265,190,230,230);stroke();fill();clopath();beginpath();fillstyle="#fdd06b"linewidth=3;strokestyle="#ca5939";moveto(350,230);beziercurveto(325,175,435,190,395,230);stroke();fill();clopath();//牙beginpath();strokestyle="#000";linewidth=2;fillstyle="#fff";moveto(275,272);lineto(275,292);lineto(295,292);lineto(295,272);moveto(300,272);lineto(300,292);lineto(320,292);lineto(320,271);//rect(297,252,20,20);fill();stroke();clopath();//嘴beginpath();strokestyle="#000";linewidth=3;beziercurveto(210,220,290,340,380,220);stroke();clopath();beginpath();strokestyle="#000";linewidth=2;beziercurveto(205,225,205,215,220,220);stroke();clopath();beginpath();strokestyle="#000";linewidth=2;beziercurveto(370,220,380,215,385,225);stroke();clopath();//鼻子beginpath();strokestyle="#000";linewidth=3;fillstyle="#f5e262";moveto(290,215);beziercurveto(265,170,340,185,300,225);stroke();fill();clopath();//下巴beginpath();strokestyle="#cb662e";linewidth=2;beziercurveto(250,305,270,330,290,310);quadraticcurveto(300,305,310,310);quadraticcurveto(330,330,350,305);shadowcolor = "#cb662e"; shadowofftx = 0; shadowoffty = -3; shadowblur = 10; stroke();clopath();//雀斑beginpath();fillstyle="#bf7627";arc(197,205,2,0,math.pi*2,true);fill();clopath();beginpath();fillstyle="#bf7627";arc(210,214,2,0,math.pi*2,true);fill();clopath();beginpath();fillstyle="#bf7627";arc(218,207,2,0,math.pi*2,true);fill();clopath();beginpath();fillstyle="#bf7627";arc(367,205,2,0,math.pi*2,true);fill();clopath();beginpath();fillstyle="#bf7627";arc(390,206,2,0,math.pi*2,true);fill();clopath();beginpath();fillstyle="#bf7627";arc(380,213,2,0,math.pi*2,true);fill();clopath();//皮鞋//左beginpath();strokestyle="#000";fillstyle="#000";linewidth=4;shadowcolor = "#000"; shadowofftx = 0; shadowoffty = 0; shadowblur = 0; arc(180,577,11,0,math.pi*2,true);beziercurveto(185,560,197,575,207,560);moveto(207,560);lineto(217,560);quadraticcurveto(227,570,217,585);quadraticcurveto(197,580,180,585);quadraticcurveto(207,561,185,570);rect(207,585,10,4)stroke();fill();//ctx.rotate( m * math.pi / 180)clopath();//右beginpath();strokestyle="#000";fillstyle="#000";linewidth=4;shadowcolor = "#000"; shadowofftx = 0; shadowoffty = 0; shadowblur = 0; arc(405,577,11,0,math.pi*2,true);beziercurveto(400,560,388,575,378,560);moveto(378,560);lineto(368,560);quadraticcurveto(358,570,368,585);quadraticcurveto(388,580,405,585);quadraticcurveto(422,561,400,570);rect(368,585,10,4)stroke();fill();//ctx.rotate( m * math.pi / 180)clopath();//白点beginpath();strokestyle="#f5e262";fillstyle="#c4b127";fill();evencompellip(ctx, 160, 100, 10, 15);evencompellip(ctx, 150, 150, 5, 7);evencompellip(ctx, 200, 320, 7, 10)evencompellip(ctx, 225, 350, 11, 16)evencompellip(ctx, 425, 120, 11, 16)evencompellip(ctx, 410, 320, 9, 12)evencompellip(ctx, 380, 340, 6, 9)clopath();}function evencompellip(ctx, x, y, a, b){ctx.save();//选择a、b中的较大者作为arc方法的半径参数var r = (a > b) ? a : b; var ratiox = a / r; //横轴缩放比率var ratioy = b / r; //纵轴缩放比率ctx.scale(ratiox, ratioy); //进行缩放（均匀压缩）ctx.beginpath();//从椭圆的左端点开始逆时针绘制ctx.moveto((x + a) / ratiox, y / ratioy);ctx.arc(x / ratiox, y / ratioy, r, 0, 2 * math.pi);ctx.clopath();ctx.stroke();ctx.fill();ctx.restore();};</script></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持ww鹅蛋脸美女w.887551.com。
本文发布于:2023-04-06 10:14:18，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ed568c123ec20e5c81b9ed3a8ad1e52e.html
本文word下载地址：canvas简易绘图的实现（海绵宝宝篇）.doc
本文 PDF 下载地址：canvas简易绘图的实现（海绵宝宝篇）.pdf
上一篇：漂白剂需要密封保存吗
下一篇：返回列表