用Canvas画一个 Google Logo
开始学习canvas了 浏览博客时 看到作者发了一张Google Logo;便心血来潮 东拼西凑 画了一个 😋, 初版,后期在完善,代码如下
1 <!DOCTYPE html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Google Logo</title> 8 <style> 9 body { 10 overflow-y: hidden; 11 } 12 13 .wrap { 14 width: 100vw; 15 height: 100vh; 16 display: flex; 17 justify-content: center; 18 align-items: center; 19 } 20 21 #canvas { 22 box-shadow: 0 0 2px 2px skyblue; 23 } 24 </style> 25 </head> 26 27 <body> 28 <div class="wrap"> 29 <canvas id="canvas">抱歉,当前浏览器不支持Canvas</canvas> 30 </div> 31 </body> 32 <script> 33 const wrap = document.getElementsByClassName('wrap'); 34 const canvas = document.getElementById('canvas'); 35 const context = canvas.getContext('2d'); 36 const canvasW = canvasH = 600; 37 canvas.width = canvasW; 38 canvas.height = canvasH; 39 let { 40 sin, 41 cos, 42 PI: pi 43 } = Math; 44 45 46 context.save(); 47 context.translate(canvasW / 2, canvasW / 2); 48 // 圆等分为3份 49 context.beginPath(); 50 context.fillStyle = '#DB4A3D'; 51 context.arc(0, 0, canvasW / 2, Math.PI / 180 * 210, Math.PI / 180 * 330); 52 context.lineTo(0, 0); 53 context.fill(); 54 context.beginPath(); 55 context.fillStyle = '#FBCE49'; 56 context.arc(0, 0, canvasW / 2, Math.PI / 180 * 330, Math.PI / 180 * 90); 57 context.lineTo(0, 0); 58 context.closePath(); 59 context.fill(); 60 context.beginPath(); 61 context.fillStyle = '#2F9C59'; 62 context.arc(0, 0, canvasW / 2, Math.PI / 180 * 90, Math.PI / 180 * 210); 63 context.lineTo(0, 0); 64 context.closePath(); 65 context.fill(); 66 context.restore(); 67 68 69 // 内接三角形 70 context.beginPath(); 71 context.fillStyle = '#DB4A3D'; 72 context.moveTo(40, 150); 73 context.lineTo(300, 150); 74 context.lineTo(170, cos(pi / 180 * 30) * 260 + 150); 75 context.closePath(); 76 context.fill(); 77 78 79 80 context.beginPath(); 81 context.fillStyle = '#FBCE49'; 82 context.moveTo(300, 150); 83 context.lineTo(560, 150); 84 context.lineTo(430, cos(pi / 180 * 30) * 260 + 150); 85 context.closePath(); 86 context.fill(); 87 88 89 context.beginPath(); 90 context.fillStyle = '#2F9C59'; 91 context.moveTo(170, cos(pi / 180 * 30) * 260 + 150); 92 context.lineTo(430, cos(pi / 180 * 30) * 260 + 150); 93 context.lineTo(300, 600); 94 context.closePath(); 95 context.fill(); 96 97 98 // 画阴影 红色 99 context.beginPath(); 100 let redShadow = context.createLinearGradient(40, 150, 240, cos(pi / 180 * 30) * 260 + 150); 101 redShadow.addColorStop(0.1, '#DB4A3D'); 102 redShadow.addColorStop(0.8, 'transparent'); 103 context.fillStyle = redShadow; 104 context.moveTo(40, 150); 105 context.lineTo(240, cos(pi / 180 * 30) * 260 + 150); 106 context.lineTo(170, cos(pi / 180 * 30) * 260 + 150); 107 context.fill(); 108 109 110 context.beginPath(); 111 let yellowShadow = context.createLinearGradient(560, 150, 300, 210); 112 yellowShadow.addColorStop(0.1, '#FBCE49'); 113 yellowShadow.addColorStop(1, 'transparent'); 114 context.fillStyle = yellowShadow; 115 context.moveTo(560, 150); 116 context.lineTo(300, 210); 117 context.lineTo(300, 150); 118 context.fill(); 119 120 121 context.beginPath(); 122 let greenShadow = context.createLinearGradient(300, 600, 300, 210); 123 greenShadow.addColorStop(0.1, '#2F9C59'); 124 greenShadow.addColorStop(1, 'transparent'); 125 context.fillStyle = greenShadow; 126 context.moveTo(300, 600); 127 context.lineTo(360, cos(pi / 180 * 30) * 260 + 150); 128 context.lineTo(430, cos(pi / 180 * 30) * 260 + 150); 129 context.fill(); 130 131 132 133 134 // 白色小圆 135 context.beginPath(); 136 context.fillStyle = '#F0F1F0'; 137 context.beginPath(); 138 context.arc(300, 300, 150, 0, Math.PI / 180 * 360); 139 context.fill(); 140 141 142 143 // 蓝色小圆 144 context.beginPath(); 145 context.fillStyle = '#4586F2'; 146 context.arc(300, 300, 130, Math.PI / 180 * 0, Math.PI / 180 * 360); 147 context.fill(); 148 </script> 149 150 </html>
效果嘛 还算凑合
就酱紫,欢迎拍砖 代码写的太丑 见谅~ 下一步 准备画个 GitHub Logo 😝