canvas--哆啦A梦

学习canvas时画的一个哆啦A梦，还有不足，以后改进
具体实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mycav{
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas id="mycav" width="800" height="600"></canvas>
<script>
    var cav = document.getElementById('mycav');
    var can = cav.getContext('2d');

    can.beginPath();
    can.strokeStyle = '#000';
    can.fillStyle = '#00A0E8';
    can.arc(300,280,100,(2/3)*Math.PI,(1/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = '#000';
    can.fillStyle = '#fff';
    can.arc(300,300,80,(2/3)*Math.PI,(1/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*
    * context为Canvas的2D绘图环境对象，
    * x为椭圆中心横坐标，
    * y为椭圆中心纵坐标，
    * a为椭圆横半轴长，
    * b为椭圆纵半轴长。
    */
    function ParamEllipse(context, x, y, a, b)
    {
        //max是等于1除以长轴值a和b中的较大者
        //i每次循环增加1/max，表示度数的增加
        //这样可以使得每次循环所绘制的路径（弧线）接近1像素
        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)
        {
            //参数方程为x = a * cos(i), y = b * sin(i)，
            //参数为i，表示度数（弧度）
            context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
        }
        context.closePath();
        context.stroke();
    }

    can.beginPath();
    can.fillStyle = '#fff';
    can.strokeStyle = "#000";
    ParamEllipse(can,280,220,15,20);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.fillStyle = '#fff';
    can.strokeStyle = "#000";
    ParamEllipse(can,310,220,15,20);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.arc(282,225,5,0,Math.PI,true);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.arc(308,225,5,0,Math.PI,true);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#CC0D30";
    can.arc(295,250,15,0,2*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.fillStyle = "#fff";
    can.arc(293,247,6,0,2*Math.PI);
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(297,265);
    can.lineTo(300,320);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(275,270);
    can.lineTo(230,250);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(275,280);
    can.lineTo(220,280);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(275,290);
    can.lineTo(230,310);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(320,270);
    can.lineTo(360,250);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(320,280);
    can.lineTo(370,280);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(320,290);
    can.lineTo(360,310);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.arc(300,270,50,0,Math.PI);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#E5012D";
    can.fillRect(250,365,100,10);
    can.stroke();
    can.fill();
    can.closePath();
    /*肚子*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.arc(300,443,80,-(1/3)*Math.PI,(4/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*口袋*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#fff";
    can.arc(300,418,50,-(1/3)*Math.PI,(4/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(270,418);
    can.lineTo(330,418);
    can.stroke();
    can.closePath();
    can.beginPath();
    can.strokeStyle = "#000";
    can.arc(300,418,30,0,Math.PI);
    can.stroke();
    can.closePath();
    /*左胳膊半圆*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.arc(250,375,10,-(5/6)*Math.PI,(1/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*左胳膊矩形*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.rotate(-40*Math.PI/180);
    can.rect(-133,438,80,20);
    can.stroke();
    can.fill();
    can.closePath();
    /*左胳膊圆*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#fff";
    can.arc(-133,450,13,0,2*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*右胳膊半圆*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.arc(31,515,10,-(7/6)*Math.PI,(1/6)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*右胳膊矩形*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.rotate(90*Math.PI/180);
    can.rect(520,-42,80,20);
    can.stroke();
    can.fill();
    can.closePath();
    /*右胳膊圆*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#fff";
    can.arc(600,-34,13,0,2*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
</script>
    </body>
</html>
猜你喜欢
