Last active
January 13, 2019 14:39
-
-
Save jkasun/4dfd1b8e3618bac2bbf4d6b7fb7f8f78 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <canvas id='canvas' height="150" width="400" style="border: 1px solid"></canvas> | |
| <script> | |
| let width = 400; | |
| let height = 150; | |
| let ctx = document.getElementById('canvas').getContext('2d'); | |
| let draw = function () { | |
| ctx.clearRect(0, 0, width, height); | |
| ctx.beginPath(); | |
| ctx.fillStyle = '#000'; | |
| ctx.moveTo(10, height - 10); | |
| let points = [{ x: 10, y: height - 10 }]; | |
| for (var i = 1; i < 20; i++) { | |
| let x = 10 + i * 20; | |
| let y = height - (20 + Math.floor(Math.random() * 50)); | |
| points.push({x, y}); | |
| } | |
| // move to the first point | |
| ctx.moveTo(points[0].x, points[0].y); | |
| var xc; | |
| for (i = 1; i < points.length - 2; i++) { | |
| xc = (points[i].x + points[i + 1].x) / 2; | |
| var yc = (points[i].y + points[i + 1].y) / 2; | |
| ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc); | |
| } | |
| // curve through the last two points | |
| ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y); | |
| ctx.lineTo(xc + 30, height - 10); | |
| ctx.stroke(); | |
| ctx.fill(); | |
| setTimeout(function () { | |
| ctx.restore(); | |
| window.requestAnimationFrame(draw); | |
| }, 250); | |
| } | |
| window.requestAnimationFrame(draw); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Making this public