## 一、飞机-a  ~~~ <canvas id="zh_canavas"></canvas> <script> var $canvasEle = document.getElementById('zh_canavas'); $canvasEle.width = 500; $canvasEle.height = 500; var ctx = $canvasEle.getContext('2d'); var angle = 0, x = 20, y = 20, planeHalf = 15; ctx.save(); // 右翼翅 ctx.fillStyle = '#3D7FE5'; ctx.fillRect(x+5, y+10, 1, 4); ctx.fillRect(x+10, y+14, 1, 4); // 左翼翅 ctx.fillStyle = '#3D7FE5'; ctx.fillRect(x-5, y+10, 1, 4); ctx.fillRect(x-10, y+14, 1, 4); // 翼 ctx.beginPath(); ctx.moveTo(x, y+9); ctx.lineTo(x+14, y+19); ctx.lineTo(x+15, y+21); ctx.lineTo(x, y+16); ctx.lineTo(x, y+16); ctx.lineTo(x-15, y+21); ctx.lineTo(x-14, y+19); ctx.moveTo(x, y+9); ctx.fillStyle = '#4188EF'; ctx.fill(); ctx.closePath(); // 尾 ctx.beginPath(); ctx.moveTo(x, y+22); ctx.lineTo(x+6, y+26); ctx.lineTo(x+7, y+28); ctx.lineTo(x, y+26); ctx.lineTo(x-7, y+28); ctx.lineTo(x-6, y+26); ctx.moveTo(x, y+22); ctx.fillStyle = '#4188EF'; ctx.fill(); ctx.closePath(); // 主体 ctx.beginPath(); ctx.moveTo(x, y); ctx.quadraticCurveTo(x+2, y+2, x+2, y+4); ctx.lineTo(x+2, y+24); ctx.quadraticCurveTo(x+2, y+26, x, y+28); ctx.quadraticCurveTo(x-2, y+26, x-2, y+24); ctx.lineTo(x-2, y+4); ctx.quadraticCurveTo(x-2, y+2, x, y); ctx.fillStyle = '#66B3FF'; ctx.fill(); ctx.closePath(); ctx.restore(); </script> ~~~ ## 2、飞机-b  ~~~ <canvas id="zh_canavas"></canvas> <script> var $canvasEle = document.getElementById('zh_canavas'); $canvasEle.width = 500; $canvasEle.height = 500; var ctx = $canvasEle.getContext('2d'); var angle = 0, x = 20, y = 20, planeHalf = 15; ctx.save(); ctx.beginPath(); ctx.translate(0, -planeHalf); ctx.moveTo(x, y); ctx.lineTo(x+2, y+3); ctx.lineTo(x+2, y+12); ctx.lineTo(x+13, y+20); ctx.lineTo(x+2, y+16); ctx.lineTo(x+2, y+23); ctx.lineTo(x+5, y+26); ctx.lineTo(x, y+25); ctx.lineTo(x-5, y+26); ctx.lineTo(x-2, y+23); ctx.lineTo(x-2, y+16); ctx.lineTo(x-13, y+20); ctx.lineTo(x-2, y+12); ctx.lineTo(x-2, y+3); ctx.fillStyle = '#f00'; ctx.fill(); ctx.closePath(); ctx.restore(); </script> ~~~