1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         #cs {
 11             border: 1px solid black;
 12             background: black;
 13         }
 14     </style>
 15 </head>
 16 
 17 <body>
 18     <canvas id="cs" width="500" height="500">
 19 
 20     </canvas>
 21 
 22     <script>
 23         let cs = document.getElementById('cs');
 24         let ctx = cs.getContext('2d');
 25         ctx.fillStyle = 'green';
 26         ctx.arc(200, 100, 50, 0, Math.PI, true);
 27         ctx.globalCompositeOperation = 'source-over';
 28         ctx.fill();
 29         //眼睛
 30         ctx.beginPath();
 31         ctx.arc(175, 80, 10, 0, Math.PI * 2, true);
 32         ctx.arc(222, 80, 10, 0, Math.PI * 2, true)
 33         ctx.fillStyle = 'black';
 34         ctx.fill();
 35         //耳朵
 36         ctx.beginPath();
 37         ctx.lineCap = "round";//设置返回线条
 38         ctx.lineWidth = 6;
 39         ctx.moveTo(160, 35);
 40         ctx.lineTo(175, 60);
 41         ctx.strokeStyle = "green";
 42         ctx.stroke();
 43 
 44         ctx.beginPath();
 45         ctx.lineCap = "round";//设置返回线条
 46         ctx.lineWidth = 6;
 47         ctx.moveTo(238, 35);
 48         ctx.lineTo(222, 60);
 49         ctx.strokeStyle = "green";
 50         ctx.stroke();
 51 
 52         //中间身体
 53         ctx.beginPath();    
 54         ctx.moveTo(150,110);
 55         ctx.lineTo(150,200);
 56         ctx.arcTo(150,210,160,210,10);
 57         ctx.lineTo(240,210);
 58         ctx.arcTo(250,210,250,200,10);
 59         ctx.lineTo(250,110);
 60         ctx.lineTo(150,110)
 61         ctx.strokeStyle = "green";
 62         ctx.fillStyle='green';
 63         ctx.fill();
 64         ctx.stroke();
 65         //两只手
 66         ctx.beginPath();
 67         ctx.lineCap = "round";//设置返回线条
 68         ctx.lineWidth = 20;
 69         ctx.moveTo(130, 115);
 70         ctx.lineTo(130, 160);
 71         ctx.strokeStyle = "green";
 72         ctx.stroke();
 73 
 74         ctx.beginPath();
 75         ctx.lineCap = "round";//设置返回线条
 76         ctx.lineWidth = 20;
 77         ctx.moveTo(270, 115);
 78         ctx.lineTo(270, 160);
 79         ctx.strokeStyle = "green";
 80         ctx.stroke();
 81 
 82         //两只脚
 83         ctx.beginPath();
 84         ctx.lineCap = "round";//设置返回线条
 85         ctx.lineWidth = 22;
 86         ctx.moveTo(180, 215);
 87         ctx.lineTo(180, 250);
 88         ctx.strokeStyle = "green";
 89         ctx.stroke();
 90 
 91         ctx.beginPath();
 92         ctx.lineCap = "round";//设置返回线条
 93         ctx.lineWidth = 22;
 94         ctx.moveTo(220, 215);
 95         ctx.lineTo(220, 250);
 96         ctx.strokeStyle = "green";
 97         ctx.stroke();
 98     </script>
 99 </body>
100 
101 </html>