用Canvas画一个 Google Logo

最新推荐文章于 2021-06-15 23:14:58 发布

weixin_30583563

最新推荐文章于 2021-06-15 23:14:58 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/air1996/p/9159534.html

版权

开始学习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>