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>