#canvas1 {background-color: #5F9EA0;}
var can = document.getElementById("canvas1");
var pen = can.getContext("2d");
//脑袋
drawCircle(300, 180, 150, 0, 2, false, "rgb(80,170,230)");
drawCircle(300, 250, 150, 1.25, 1.75, false, "white"); //上脸
drawCircle(300, 170, 150, 0.25, 0.75, false, "white"); //下脸
drawCircle(270, 210, 100, 0.75, 1.25, false, "white");//左脸
drawCircle(330, 210, 100, 1.75, 0.25, false, "white");//右脸
//中间
pen.beginPath();
pen.fillRect(198, 140, 204, 140);
pen.closePath();
//
ellipseOne(pen,260,110,40,50);
ellipseOne(pen,340,110,40,50);
//眼珠
drawCircle(270,130,15,0,2,false,"black");
drawCircle(330,130,15,0,2,false,"black");
//
drawCircle(300,165,22,0,2,false,"red");
//竖线
beard(300,190,300,280);
//左胡子
beard(200,180,270,200);//1
beard(200,210,270,210);//2
beard(200,240,270,220);//3
//右胡子
beard(328,200,398,180);//1
beard(328,210,398,210);//2
beard(328,220,398,240);//3
//嘴巴
pen.beginPath();
pen.arc(300,145,150,0.25*Math.PI,0.75*Math.PI,false);
pen.stroke();
pen.closePath();
//切棱角
drawCircle(195,320,18,0.7,1.3,false,"red");
drawCircle(405,320,18,1.7,0.3,false,"red");
//脖子
pen.beginPath();
pen.fillRect(184,305,233,30);
pen.closePath();
//身子
pen.beginPath();
pen.fillStyle="rgb(80,170,230)";
pen.fillRect(190,335,222,180);
pen.closePath();
//胳膊
arm(190,335,140,395,175,425,190,405,"rgb(80,170,230)");
arm(190,405,190,514,285,514,285,514,"rgb(80,170,230)");
arm(316,514,412,514,412,405,412,405,"rgb(80,170,230)");
drawCircle(145,420,30,0,2,false,"white");
//右
arm(412,335,462,395,427,425,412,405,"rgb(80,170,230)");
drawCircle(457,420,30,0,2,false,"white");
//衣服
drawCircle(300,391,80,1.25,1.75,true,"white");
drawCircle(300,391,60,0,1,false,"white");
//铃铛
drawCircle(300,345,25,0,2,true,"yellow");
drawCircle(300,350,8,0,2,true,"black");//黑点
beard(300,350,300,370);//竖线
beard(283,327,318,327);//纹路
beard(275,338,325,338);
//门
drawCircle(300,511,16,0.1,0.9,true,"white");
//脚
pen.beginPath();
pen.lineTo(165,515);
pen.lineTo(287,515);
pen.arc(284,531,15,1.5*Math.PI,0.5*Math.PI,false);
pen.lineTo(287,547);
pen.lineTo(165,547);
pen.arc(165,531,15,0.5*Math.PI,1.5*Math.PI,false);
pen.lineTo(165,515);pen.closePath();
pen.fillStyle="white";pen.fill();
pen.stroke();
pen.beginPath();
drawCircle(317,531,15,0.5,1.5,false,"white");
drawCircle(436,531,15,1.5,0.5,false,"white");
pen.beginPath();
pen.fillStyle="white";
pen.fillRect(316,516,121,30);
pen.closePath();
//斜线
function arm(a,b,c,d,e,f,g,h,color){
pen.beginPath();
pen.lineTo(a,b);
pen.lineTo(c,d);
pen.lineTo(e,f);
pen.lineTo(g,h);
pen.stroke();
pen.fillStyle=color;
pen.fill();
pen.closePath();
}
//线 两点
function beard(sx,sy,ex,ey){
pen.beginPath();
pen.lineTo(sx,sy);
pen.lineTo(ex,ey);
pen.stroke();
pen.closePath();
}
//画圆
function drawCircle(center1, center2, radius, start, end, bol, color) {
pen.beginPath();
pen.arc(center1, center2, radius, start * Math.PI, end * Math.PI, bol);
pen.fillStyle = color;
pen.fill();
pen.closePath();
pen.stroke();
}
//椭圆
function ellipseOne(context, x, y, a, b) {//(圆心，圆心，宽，高)
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y);
for(var i = 0; i < 2 * Math.PI; i += step) {
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.fill();
context.stroke();
}
