--- /dev/null
+function writeBottomCircle(text, canvaId, diameter) {
+ var canvas = document.getElementById(canvaId);
+ writeCircularText(
+ text.toUpperCase(),
+ canvas,
+ diameter,
+ 180,
+ 'center',
+ '40',
+ 'Roboto',
+ 0,
+ 0
+ );
+}
+
+function writeTopCircle(text, canvaId, diameter) {
+ var canvas = document.getElementById(canvaId);
+ writeCircularText(
+ text.toUpperCase(),
+ canvas,
+ diameter,
+ 0,
+ 'center',
+ '40',
+ 'Roboto',
+ 1,
+ 0
+ );
+}
+
+function writeCircularText(
+ text,
+ mainCanvas,
+ diameter,
+ startAngle,
+ align,
+ fontSize,
+ fontFamily,
+ inwardFacing,
+ kerning
+) {
+ // declare and intialize canvas, reference, and useful variables
+ align = align.toLowerCase();
+ var ctxRef = mainCanvas.getContext('2d');
+ // ctx.resetTransform();
+ var clockwise = align == 'right' ? 1 : -1; // draw clockwise for aligned right. Else Anticlockwise
+ startAngle = startAngle * (Math.PI / 180); // convert to radians
+
+ // calculate height of the font. Many ways to do this
+ // you can replace with your own!
+ var textHeight = 60;
+
+ // set text attributes
+ ctxRef.font = `${fontSize}px ${fontFamily}`;
+ ctxRef.fillStyle = 'white';
+
+ // Reverse letters for align Left inward, align right outward
+ // and align center inward.
+ if (
+ (['left', 'center'].indexOf(align) > -1 && inwardFacing) ||
+ (align == 'right' && !inwardFacing)
+ )
+ text = text.split('').reverse().join('');
+
+ // Setup letters and positioning
+ ctxRef.translate(diameter / 2 - 5, diameter / 2); // Move to center
+ startAngle += Math.PI * !inwardFacing; // Rotate 180 if outward
+ ctxRef.textBaseline = 'middle'; // Ensure we draw in exact center
+ ctxRef.textAlign = 'center'; // Ensure we draw in exact center
+
+ // rotate 50% of total angle for center alignment
+ if (align == 'center') {
+ for (var j = 0; j < text.length; j++) {
+ var charWid = ctxRef.measureText(text[j]).width;
+ startAngle +=
+ ((charWid + (j == text.length - 1 ? 0 : kerning)) /
+ (diameter / 2 - textHeight) /
+ 2) *
+ -clockwise;
+ }
+ }
+
+ // Phew... now rotate into final start position
+ ctxRef.rotate(startAngle);
+
+ // Now for the fun bit: draw, rotate, and repeat
+ for (var j = 0; j < text.length; j++) {
+ var charWid = ctxRef.measureText(text[j]).width; // half letter
+ // rotate half letter
+ ctxRef.rotate((charWid / 2 / (diameter / 2 - textHeight)) * clockwise);
+ // draw the character at "top" or "bottom"
+ // depending on inward or outward facing
+
+ ctxRef.fillText(
+ text[j],
+ 0,
+ (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2)
+ );
+
+ ctxRef.rotate(
+ ((charWid / 2 + kerning) / (diameter / 2 - textHeight)) * clockwise
+ ); // rotate half letter
+ }
+ ctxRef.resetTransform();
+}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script src="dist/circletype.min.js"></script>
+ <script src="dist/circletext.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Antifa Generator</title>
</head>
<body>
- <section class="logo">
- <div id="top-text">
- <h2 class="logo-text" id="antifa-group"> Desenvolvedores </h2>
- </div>
- <div id="bottom-text">
- <h2 class="logo-text" id="antifa"> Antifacistas </h2>
- </div>
-
- </section>
+ <canvas id="logo" width="500" height="500">
+ Your browser does not support the canvas element.
+ </canvas>
<script>
- const antifaGroup = document.getElementById('antifa-group')
- const antifa = document.getElementById('antifa')
- const logo = document.getElementsByClassName('logo')[0]
- const radius = logo.offsetHeight / 2;
- console.log('radius :>> ', radius);
-
- new CircleType(antifaGroup)
- .radius(radius);
-
- new CircleType(antifa)
- .dir(-1)
- .radius(radius);
+ writeBottomCircle("Antifacistas", "logo", 510)
+ writeTopCircle("Desenvolvedores", "logo", 510)
</script>
</body>
projects / antifa-generator.git / commitdiff