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>
