HTML5 Logo Tracing
How do I make an html5 logo tracing?
What is a html5 logo tracing? How do you make a html5 logo tracing? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.
HTML5 Logo Tracing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Logo Tracing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <center> <canvas id="canvas" height="400" width="400"></canvas>
</center>
<img src="https://lamplighter.io/img/lamplighter.png" id="LL" /> <script src="js/index.js"></script>
</body>
</html>
HTML5 Logo Tracing - Script Codes CSS Codes
body { margin: 0px; background: #333;
}
#LL { display: none;
}
#canvas { width: 400px; height: 400px;
}
HTML5 Logo Tracing - Script Codes JS Codes
var points = [ [255,346], [288,251], [334,202], [372,246], [290,246], [245,155], [200,246], [155,202], [110,246], [66,201], [28,246], [110,246], [155,386]
];
var currentPoint = 0;
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { return setTimeout(callback, 1000/60); };
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var LL = document.getElementById('LL');
var animCounter = 0;
var render = function() { canvas.width = canvas.width; context.strokeStyle = '#CCC'; context.beginPath(); context.lineWidth = 24; context.moveTo(170,351); var lastX = 170; var lastY = 371; for (point in points) { if (point > currentPoint) { continue; } if (point == currentPoint) { lineCounter = (animCounter - point * 30); avgX = (points[point][0] * lineCounter + lastX * (30 - lineCounter)) / 30; avgY = (points[point][1] * lineCounter + lastY * (30 - lineCounter)) / 30; context.lineTo(avgX, avgY); } else { context.lineTo(points[point][0], points[point][1]); var lastX = points[point][0]; var lastY = points[point][1]; } } context.stroke(); currentPoint = Math.floor(animCounter / 30); if (animCounter >= points.length * 30) { context.beginPath(); context.arc(canvas.width/2, canvas.height/2, 192, Math.PI * .62 - Math.PI * 2 * (animCounter - points.length * 30) / 180, Math.PI * .62); context.stroke(); } if (animCounter >= points.length * 30 + 240) { animCounter = 0; } context.globalCompositeOperation = 'destination-in'; context.drawImage(LL,0,0); animCounter++; requestAnimationFrame(render);
}
render();
Developer | Dave DeHaan |
Username | davedehaan |
Uploaded | January 04, 2023 |
Rating | 3 |
Size | 2,301 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Randomly generated canvas clouds | 2,028 Kb |
Winter | 2,613 Kb |
404 Glitch Effect | 3,495 Kb |
Multi-color Text using globalCompositeOperation | 1,983 Kb |
More Fun with Lines | 3,118 Kb |
Unblur on Page Load | 2,048 Kb |
Fun with Lines | 2,897 Kb |
Asteroids | 2,846 Kb |
Yule Logs | 1,496 Kb |
Christmas Countdown | 2,133 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
404 Page | Saransh | 2,666 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!