画一颗随机数

代码：

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <title>codePen - Random Tree</title>
7. </head>
8. <body>
10. <canvas></canvas>
12. <script>
13.     const canvas = document.querySelector('canvas');
14.     const ctx = canvas.getContext('2d');
16.     // canvas.width = window.innerWidth * devicePixelRatio;
17.     // canvas.height = window.innerHeight * devicePixelRatio;
19.     canvas.width = window.innerWidth;
20.     canvas.height = window.innerHeight;
22.     ctx.translate(canvas.width / 2, canvas.height);
23.     ctx.scale(1, -1);
25.     drawBranch([0, 0], 200, 30, 90);
27.     function drawBranch (v0, len, thick, angle) {
28.         if(thick < 10 && Math.random() < 0.3) {
29.             return;
30.         }
31.         if (thick < 2) {
32.             ctx.beginPath()
33.             ctx.arc(...v0, 4, 0, 2 * Math.PI);
34.             ctx.fillStyle = 'red';
35.             ctx.fill();
36.             return;
37.         }
38.         ctx.beginPath();
39.         ctx.moveTo(...v0);
40.         const v1 = [
41.             v0[0] + len * Math.cos(((angle) * Math.PI) / 180),
42.             v0[1] + len * Math.sin(((angle) * Math.PI) / 180)
43.         ]
44.         ctx.lineTo(...v1);
45.         ctx.strokeStyle = '#333';
46.         ctx.lineWidth = thick;
47.         ctx.lineCap = 'round';
48.         ctx.stroke();
50.         drawBranch(v1, len * 0.8, thick * 0.7, angle + Math.random() * 30);
52.         drawBranch(v1, len * 0.8, thick * 0.7, angle - Math.random() * 30);
53.     }
54. </script>
55. </body>
56. </html>

复制代码

结果：