canvas简易绘图的实现（海绵宝宝篇）
程序员文章站
2022-06-14 17:26:24
这篇文章主要介绍了canvas简易绘图的实现（海绵宝宝篇），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-07-04...
最近在研究canvas，简单的用canvas绘制了一下卡通人物--海绵宝宝。
图片如下：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas海绵宝宝</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){
//袖子
//左
beginpath();
fillstyle="#fff";
strokestyle="#000";
linewidth=2;
beziercurveto(142,253,112,263,112,303)
quadraticcurveto(120,308,150,303)
fill();
stroke();
closepath();
//右
beginpath();
fillstyle="#fff";
strokestyle="#000";
linewidth=2;
beziercurveto(445,253,477,263,477,303)
quadraticcurveto(467,308,447,303)
fill();
stroke();
closepath();
//胳膊
//左
beginpath();
fillstyle="#f5e261";
strokestyle="#000";
linewidth=2;
moveto(122,306);
lineto(110,406);
lineto(120,406);
lineto(132,306);
fill();
stroke();
closepath();
//右
beginpath();
fillstyle="#f5e261";
strokestyle="#000";
moveto(458,306);
lineto(470,406);
lineto(480,406);
lineto(468,306);
fill();
stroke();
closepath();
//手
//左
//衣服
beginpath();
fillstyle="#fff";
strokestyle="#000";
linewidth=5;
shadowcolor = "#000";
shadowoffsetx = 0;
shadowoffsety = 0;
shadowblur = 0;
moveto(145,385);
lineto(146,425);
lineto(442,425);
lineto(443,385);
stroke();
fill();
closepath();
//裤子
beginpath();
fillstyle="#ae6f28";
strokestyle="#000";
moveto(146,427);
lineto(147,470);
lineto(441,470);
lineto(442,427);
stroke();
fill();
closepath();
//裤子图案
beginpath();
fillstyle="#000";
rect(156,438,60,15);
rect(236,438,120,15);
rect(373,438,60,15);
fill();
closepath();
//裤腿
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();
closepath();
//腿
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();
closepath();
//袜子
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();
closepath();
//蓝杠
beginpath();
strokestyle="#536d92";
linewidth=4;
moveto(208,523);
lineto(218,523);
moveto(368,523);
lineto(378,523);
stroke();
closepath();
//红杠
beginpath();
strokestyle="#da4751";
linewidth=4;
moveto(209,530);
lineto(218,530);
moveto(369,530);
lineto(378,530);
stroke();
closepath();
//领带
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();
closepath();
//领子
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();
closepath();
//脸
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,40,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);
quadraticcurveto(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();
closepath();
//眼睛
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();
closepath();
//眼仁
beginpath();
strokestyle="#000";
fillstyle="#50d1f1";
arc(255,180,18,0,math.pi*2,true);
stroke();
fill();
closepath();
beginpath();
strokestyle="#000";
fillstyle="#50d1f1";
arc(335,180,18,0,math.pi*2,true);
stroke();
fill();
closepath();
//眼球
beginpath();
strokestyle="#000";
fillstyle="#000";
arc(255,180,10,0,math.pi*2,true);
stroke();
fill();
closepath();
beginpath();
strokestyle="#000";
fillstyle="#000";
arc(335,180,10,0,math.pi*2,true);
stroke();
fill();
closepath();
//眼睫毛
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);
moveto(344,112);
lineto(344,133);
moveto(380,120);
lineto(365,140);
stroke();
closepath();
//嘴角
beginpath();
fillstyle="#fdd06b"
linewidth=3;
strokestyle="#ca5939";
moveto(190,230);
beziercurveto(160,175,265,190,230,230);
stroke();
fill();
closepath();
beginpath();
fillstyle="#fdd06b"
linewidth=3;
strokestyle="#ca5939";
moveto(350,230);
beziercurveto(325,175,435,190,395,230);
stroke();
fill();
closepath();
//牙
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();
closepath();
//嘴
beginpath();
strokestyle="#000";
linewidth=3;
beziercurveto(210,220,290,340,380,220);
stroke();
closepath();
beginpath();
strokestyle="#000";
linewidth=2;
beziercurveto(205,225,205,215,220,220);
stroke();
closepath();
beginpath();
strokestyle="#000";
linewidth=2;
beziercurveto(370,220,380,215,385,225);
stroke();
closepath();
//鼻子
beginpath();
strokestyle="#000";
linewidth=3;
fillstyle="#f5e262";
moveto(290,215);
beziercurveto(265,170,340,185,300,225);
stroke();
fill();
closepath();
//下巴
beginpath();
strokestyle="#cb662e";
linewidth=2;
beziercurveto(250,305,270,330,290,310);
quadraticcurveto(300,305,310,310);
quadraticcurveto(330,330,350,305);
shadowcolor = "#cb662e";
shadowoffsetx = 0;
shadowoffsety = -3;
shadowblur = 10;
stroke();
closepath();
//雀斑
beginpath();
fillstyle="#bf7627";
arc(197,205,2,0,math.pi*2,true);
fill();
closepath();
beginpath();
fillstyle="#bf7627";
arc(210,214,2,0,math.pi*2,true);
fill();
closepath();
beginpath();
fillstyle="#bf7627";
arc(218,207,2,0,math.pi*2,true);
fill();
closepath();
beginpath();
fillstyle="#bf7627";
arc(367,205,2,0,math.pi*2,true);
fill();
closepath();
beginpath();
fillstyle="#bf7627";
arc(390,206,2,0,math.pi*2,true);
fill();
closepath();
beginpath();
fillstyle="#bf7627";
arc(380,213,2,0,math.pi*2,true);
fill();
closepath();
//皮鞋
//左
beginpath();
strokestyle="#000";
fillstyle="#000";
linewidth=4;
shadowcolor = "#000";
shadowoffsetx = 0;
shadowoffsety = 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)
closepath();
//右
beginpath();
strokestyle="#000";
fillstyle="#000";
linewidth=4;
shadowcolor = "#000";
shadowoffsetx = 0;
shadowoffsety = 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)
closepath();
//白点
beginpath();
strokestyle="#f5e262";
fillstyle="#c4b127";
fill();
evencompellipse(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();
//选择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.closepath();
ctx.stroke();
ctx.fill();
ctx.restore();
};
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 如何做拔丝香蕉