Creating HTML5 3D circle text with shadows

Creating HTML5 3D circle text with shadows

5 26580
HTML5 3D circle text with shadows

HTML5 3D circle text with shadows. Another one great HTML5 tutorial. It tells us how to draw 3D text and display it in a circle. Also it tells us about applying shadow and 3D effect to text. Plus I am going to rotate text in a circle.

Here are our demo and downloadable package:

Live Demo

Ok, download the source files and lets start coding !


Step 1. HTML

As usual – very small HTML code with canvas element inside

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 3D circle text with shadows | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header>
<h2>HTML5 3D circle text with shadows</h2>
<a href="https://www.script-tutorials.com/html5-3d-circle-text-with-shadows/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="contr">
<input type="radio" name="mode" onchange="bPlay = false" checked /><label>Pause</label>
<input type="radio" name="mode" onchange="bPlay = true" /><label>Play</label>
</div>
<canvas id="panel" width="600" height="600"></canvas>
</div>
</body>
</html>

Step 2. CSS

css/main.css

We are going to skip of publishing styles today again.

Step 3. JS

js/script.js

// variables
var canvas, ctx;
var bPlay = false;
var iAngle = 0;
var sText = 'Hello my 3D circle text ';
// drawing functions
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
if (bPlay == 1) {
clear(); // clear canvas
// fill background
ctx.fillStyle = '#d7e8f1';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// change angle
iAngle+=0.005;
// and draw text circle in center of canvas with radius = 200
draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);
}
}
function draw3DTextCircle(s, x, y, radius, iSAngle){
// rarian per letter
var fRadPerLetter = 2*Math.PI / s.length;
// save context, translate and rotate it
ctx.save();
ctx.translate(x,y);
ctx.rotate(iSAngle);
// amount of extra bottom layers
var iDepth = 4;
// set dark green color for extra layers
ctx.fillStyle = '#168d1e';
// pass through each letter of our text
for (var i=0; i<s.length; i++) {
ctx.save();
ctx.rotate(i*fRadPerLetter);
// draw extra layers
for (var n = 0; n < iDepth; n++) {
ctx.fillText(s[i], n, n - radius);
}
// shadow params
ctx.fillStyle = '#00d50f';
ctx.shadowColor = 'black';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = iDepth + 2;
ctx.shadowOffsetY = iDepth + 2;
// draw letter
ctx.fillText(s[i], 0, -radius);
ctx.restore();
}
ctx.restore();
}
// binding onload event
if (window.attachEvent) {
window.attachEvent('onload', main_init);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
main_init();
};
window.onload = newonload;
} else {
window.onload = main_init;
}
}
function main_init() {
// create canvas and context objects
canvas = document.getElementById('panel');
ctx = canvas.getContext('2d');
// initial text settings
ctx.font = '64px Verdana';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// fill background
ctx.fillStyle = '#d7e8f1';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// draw text circle in center of canvas with radius = 200
draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);
setInterval(drawScene, 40); // loop drawScene
}

I have defined own function to draw 3d text circle – draw3DTextCircle. This function have next params – text itself, coordinates, radius and angle. This function will split all text by letters, then I will draw each letter separately with rotation (and 3d effect).


Live Demo

Conclusion

Welcome back to read something new and interesting about HTML5. Good luck in your projects.

SIMILAR ARTICLES


5 COMMENTS

  1. hello thanks for sharing this..
    i need to use images not text and the same rotate effect….can u help me please?

    thanks

    • Hi Brandy,
      It depends only on your requirements. Just because it can be usual square image (some JPG), or it can be transparent image (PNG).

Leave a Reply