canvas画布画卡通人物--哆啦A梦-原创手记-慕课网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #canvas1 {background-color: #5F9EA0;}
        </style>
    </head>
    <body>
        <canvas id="canvas1" width="600" height="800"></canvas>
    </body>
    <script type="text/javascript">
        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();
        }
    </script>

</html>