Creating HTML5 3D circle text with shadows

Creating HTML5 3D circle text with shadows

5 29075
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

[sociallocker]

download in package

[/sociallocker]


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