用canvas画一个机器猫的头像，原图如下：
机器猫头像
代码实现效果如下：
代码实现的机器猫头像
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2</title>
    <style>
        #canvas{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="620" height="620"></canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var pen=canvas.getContext("2d");
        // 开始画大脸盘子
        pen.lineWidth=5;
        pen.strokeStyle="#4d4f50";
        pen.fillStyle="#07beea";
        pen.beginPath();
        pen.arc(315,315,188,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        pen.fill();
        // 开始画腮帮子
        pen.lineWidth=3;
        pen.fillStyle="#fff";
        pen.beginPath();
        pen.arc(315,340,123,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        pen.fill();
        // 开始画眼睛
        pen.lineWidth=4;
        pen.fillStyle="#fff";
        pen.beginPath();
        pen.strokeRect(245,226,65,35)
        pen.fillRect(245,226,65,35)
        pen.strokeRect(317,226,65,35)
        pen.fillRect(317,226,65,35)
        pen.closePath();
        // 开始画眼珠子
        pen.fillStyle="#000000";
        pen.beginPath();
        pen.arc(278,243,12,0,2*Math.PI);
        pen.arc(350,243,12,0,2*Math.PI);
        pen.closePath();
        pen.fill();
        // 开始画大红鼻子
        pen.lineWidth=2;
        pen.strokeStyle="#000";
        pen.fillStyle="#ff0000";
        pen.beginPath();
        pen.arc(313,295,26,0,2*Math.PI);
        pen.closePath();
        pen.fill();
        pen.stroke();
        // 画小嘴中线
        pen.beginPath();
        pen.moveTo(313,320)
        pen.lineTo(313,420)
        pen.closePath();
        pen.stroke();
        // 画微笑
        pen.beginPath();
        pen.arc(315,330,89,30*Math.PI/180,150*Math.PI/180);
        pen.stroke();
        // 画胡须
        pen.beginPath();
        // 左边
        pen.moveTo(275,328);
        pen.lineTo(193,328);
        pen.moveTo(275,338);
        pen.lineTo(193,358);
        pen.moveTo(275,318);
        pen.lineTo(193,300);
        // 右边
        pen.moveTo(439,328);
        pen.lineTo(357,328);
        pen.moveTo(439,358);
        pen.lineTo(357,338);
        pen.moveTo(439,300);
        pen.lineTo(357,318);
        pen.closePath();
        pen.stroke();
    </script>
</body>
</html>
原文链接： https://blog.csdn.net/Serena_tz/article/details/108713494