Beautiful canvas stars
How do I make an beautiful canvas stars?
…using N (5..10) points on a circle. What is a beautiful canvas stars? How do you make a beautiful canvas stars? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.
Beautiful canvas stars - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Beautiful canvas stars</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="space"></canvas>
<div id="info"> <h1>Beautiful canvas stars</h1> <p>using N (5..10) points on a circle</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.0/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Beautiful canvas stars - Script Codes CSS Codes
html,
body { width: 100%; height: 100%; margin: 0;
}
body{ position: relative; background-color: #333333;
}
#info { position: absolute; top: 0px; left: 0px; margin: 12px 0 0 12px;
}
h1 { color: #eeeeee; font-size: 21px; font-weight: normal; margin: 0;
}
p, a { margin: 3px 0 0 0; color: #cccccc; font-size: 13px;
}
Beautiful canvas stars - Script Codes JS Codes
var main = (function () { var canvas, ctx; var deg360 = Math.PI*2; var poc = function (x, y, r, a) { return { x: x + r * Math.cos(a * deg360), y: y + r * Math.sin(a * deg360)}; }; var drawLine = function (s,e) { ctx.beginPath(); ctx.moveTo(s.x, s.y); ctx.lineTo(e.x, e.y); ctx.lineWidth = 1; ctx.strokeStyle = 'rgb(240,200,40)'; ctx.stroke(); }; var drawStarLine = function (x, y, r, corners, c) { if (c >= corners) return; var s = poc(x, y, r, c/corners); var e = poc(x, y, r, (c+(corners>6?3:2))/corners); drawLine(s, e); } var drawStarLine5 = _.partial(drawStarLine, 70, 120, 60, 5); var drawStarLine6 = _.partial(drawStarLine, 220, 120, 60, 6); var drawStarLine7 = _.partial(drawStarLine, 370, 120, 60, 7); var drawStarLine8 = _.partial(drawStarLine, 70, 250, 60, 8); var drawStarLine9 = _.partial(drawStarLine, 220, 250, 60, 9); var drawStarLine10 = _.partial(drawStarLine, 370, 250, 60, 10); var corners = 10; var c = 0; var loop = function () { drawStarLine5(c); drawStarLine6(c); drawStarLine7(c); drawStarLine8(c); drawStarLine9(c); drawStarLine10(c); c += 1; if (c<corners) setTimeout(arguments.callee, 1000/10); }; var start = function () { canvas = document.getElementById('space'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext('2d'); loop(); }; // domReady if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); setTimeout(start, 0); }, false ); }
})();
Developer | Matthias Dittgen |
Username | matths |
Uploaded | August 26, 2022 |
Rating | 3.5 |
Size | 2,399 Kb |
Views | 34,408 |
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 |
D3 pie chart experiment | 3,821 Kb |
Draw a line coord | 3,687 Kb |
Outline demo | 1,871 Kb |
Shapes in cricles | 2,368 Kb |
Text-shadow spiral | 2,228 Kb |
Draw some line art | 3,145 Kb |
1x1 trainer | 2,566 Kb |
A Pen by Matthias Dittgen | 1,808 Kb |
Timebox | 4,202 Kb |
Text-shadow fireworks | 2,430 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 |
Twitch TV | Natester13 | 4,488 Kb |
GsuiPopup | Mr21 | 2,641 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
Svg sky | Omodev | 7,070 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Add This API | ThatGuySam | 2,848 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!