1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{margin: 0; 8 padding:0;} 9 #box 10 { 11 width: 500px; 12 height:500px; 13 margin:0 auto; 14 border: 1px solid #ddd; 15 } 16 canvas 17 { 18 background: #fff; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="box"> 24 <canvas width="500" height="500" id="can"></canvas> 25 </div> 26 <script > 27 var box=document.getElementById('box'); 28 var can=document.getElementById('can'); 29 var ctx=can.getContext('2d'); 30 ctx.beginPath(); 31 ctx.moveTo(240,50); 32 ctx.lineTo(230,60); 33 ctx.lineTo(100,80); 34 ctx.lineTo(100,110); 35 ctx.lineTo(105,110); 36 ctx.lineTo(110,105); 37 ctx.lineTo(200,90); 38 ctx.lineTo(240,95); 39 ctx.lineTo(240,180); 40 ctx.lineTo(250,230); 41 ctx.lineTo(270,230); 42 ctx.lineTo(280,180); 43 ctx.lineTo(280,95); 44 ctx.lineTo(320,90); 45 ctx.lineTo(390,105); 46 ctx.lineTo(395,110); 47 ctx.lineTo(405,110); 48 ctx.lineTo(405,80); 49 ctx.lineTo(295,60); 50 ctx.lineTo(270,50); 51 ctx.strokeStyle='black'; 52 ctx.stroke(); 53 ctx.closePath(); 54 //左翼 55 ctx.beginPath(); 56 ctx.moveTo(245,200); 57 ctx.lineTo(180,220); 58 ctx.lineTo(180,240); 59 ctx.lineTo(248,220); 60 ctx.strokeStyle='black'; 61 ctx.stroke(); 62 ctx.closePath(); 63 //右翼 64 ctx.beginPath(); 65 ctx.moveTo(275,200); 66 ctx.lineTo(345,220); 67 ctx.lineTo(345,240); 68 ctx.lineTo(272,220); 69 ctx.strokeStyle='black'; 70 ctx.stroke(); 71 ctx.closePath(); 72 //左侧点1 73 ctx.beginPath(); 74 ctx.moveTo(185,85); 75 ctx.lineTo(185,110); 76 ctx.lineTo(190,110); 77 ctx.lineTo(190,85); 78 ctx.lineTo(185,85); 79 ctx.strokeStyle='black'; 80 ctx.fillStyle='#ccc'; 81 ctx.stroke(); 82 ctx.fill(); 83 ctx.closePath(); 84 //左侧点2 85 ctx.beginPath(); 86 ctx.moveTo(195,85); 87 ctx.lineTo(195,110); 88 ctx.lineTo(200,110); 89 ctx.lineTo(200,85); 90 ctx.lineTo(195,85); 91 ctx.strokeStyle='black'; 92 ctx.fillStyle='#ccc'; 93 ctx.stroke(); 94 ctx.fill(); 95 ctx.closePath(); 96 //右侧点1 97 ctx.beginPath(); 98 ctx.moveTo(310,85); 99 ctx.lineTo(310,110); 100 ctx.lineTo(315,110); 101 ctx.lineTo(315,85); 102 ctx.lineTo(310,85); 103 ctx.strokeStyle='black'; 104 ctx.fillStyle='#ccc'; 105 ctx.stroke(); 106 ctx.fill(); 107 ctx.closePath(); 108 //右侧点2 109 ctx.beginPath(); 110 ctx.moveTo(320,85); 111 ctx.lineTo(320,110); 112 ctx.lineTo(325,110); 113 ctx.lineTo(325,85); 114 ctx.lineTo(320,85); 115 ctx.strokeStyle='black'; 116 ctx.fillStyle='#ccc'; 117 ctx.stroke(); 118 ctx.fill(); 119 ctx.closePath(); 120 121 //主体 122 ctx.beginPath(); 123 ctx.moveTo(240,40); 124 ctx.quadraticCurveTo(258,0,280,40); 125 ctx.strokeStyle='#ccc'; 126 ctx.fillStyle='#ccc'; 127 ctx.stroke(); 128 ctx.fill(); 129 ctx.closePath(); 130 131 ctx.beginPath(); 132 ctx.moveTo(240,40); 133 ctx.lineTo(240,100); 134 ctx.lineTo(280,100); 135 ctx.lineTo(280,40); 136 ctx.strokeStyle='#ccc'; 137 ctx.fillStyle='#ccc'; 138 ctx.stroke(); 139 ctx.fill(); 140 ctx.closePath(); 141 142 ctx.beginPath(); 143 ctx.moveTo(240,100); 144 ctx.quadraticCurveTo(259,295,280,100); 145 ctx.strokeStyle='#ccc'; 146 ctx.fillStyle='#ccc'; 147 ctx.stroke(); 148 ctx.fill(); 149 ctx.closePath(); 150 151 152 </script> 153 </body> 154 </html>
