canvas绘制哆啦A梦

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas绘制多啦A梦</title>
    <style type="text/css">
        #canvas1 {background-color: #5F9EA0;}
    </style>
</head>
<body>
<canvas id="canvas1" width="600" height="800" class="cnblogs_code can_run></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>

<p  style="text-align:right;">
    <button class="runcode">运行上面的代码</button>
</p>

猜你喜欢