How to create Animated 3D canvas object in HTML5

How to create Animated 3D canvas object in HTML5

11 61450
3D Canvas HTML5

Custom drawn 3d object on canvas (html5). Today’s lesson very interesting, we’ll learn how to create 3D objects using HTML5. This is our first lesson on the practice HTML5. In this tutorial we will make a quadrangular star. Which will rotate around its axis. Read more.

Here are samples and downloadable package:

Live Demo

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Canvas HTML5</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<canvas id="star_object" style="border:1px solid black;"><p class="noCanvas">Sorry, your browser don`t support Canvas in HTML5</canvas>
</div>
</body>
</html>

Very easy, isn`t it? I just draw here our canvas object. Main drawing will in javascript of course.

Step 2. CSS

Here are single CSS file with all necessary styles (this is just styles for our example layout):

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

Step 3. JS

Here are our main JS code:

js/main.js

var iStarSize = 150;
var iCanvasWidth = 500;
var iCanvasHeight = 500; 
var context, canvas;
var x, y;
var degrees = 0.0;
var dx, dy;
function run() {
degrees += 0.1;
if (x + dx > iStarSize/2 || x + dx < -iStarSize/2)
dx = -dx;
x += dx;
/*if (y + dy > iStarSize/2 || y + dy < -iStarSize/2) // for future
dy = -dy;
y += dy;*/
render();
}
function render() {
context.clearRect(0, 0, iCanvasWidth, iCanvasWidth);
context.save();
// set initial position
context.translate( iStarSize * 1.5, iStarSize * 1.5 );
// set the style properties
context.fillStyle = '#bbb';
context.strokeStyle = '#000';
context.lineWidth = 2;
// starting custom object - star
context.beginPath();
// you can uncomment it to add ordinary rotate
//context.rotate(degrees);
// changing necessary points to simulate 3d rotating
context.moveTo( 0, -iStarSize );
context.lineTo( iStarSize / 10 - x / 5, - iStarSize / 5 );
context.lineTo( iStarSize / 2 - x, 0 );
context.lineTo( iStarSize / 10 - x / 5, iStarSize / 5 );
context.lineTo( 0, iStarSize );
context.lineTo( -iStarSize / 10 + x / 5, iStarSize / 5 );
context.lineTo( -iStarSize / 2 + x, 0 );
context.lineTo( -iStarSize / 10 + x / 5, - iStarSize / 5 );
context.lineTo( 0, -iStarSize );
// add shadow to object
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur    = 4;
context.shadowColor   = 'rgba(180, 180, 180, 0.8)';
// fill shape, draw stroke
context.fill();
context.stroke();
context.closePath();
context.restore();
// echo some debug information
context.font = '12px Verdana';
context.fillStyle = '#000';
context.fillText('x: ' + x + '; y: ' + y, 10, 15);
context.fillText('dx: ' + dx + '; dy: ' + dy, 10, 30);
}
window.onload = function(){
canvas = document.getElementById('star_object');
// set size of our canvas area
canvas.width = iCanvasWidth;
canvas.height = iCanvasWidth;
context = canvas.getContext('2d');
// init of inner variables
x = y = 1;
dx = dy = 4;
setInterval(run, 20);
};

I tried to comment quite any row of my code. You should just point attention what I doing inside ‘render’ function.


Live Demo

Conclusion

I hope our first lesson about working with HTML5 showed you an interesting, if you have any suggestions, or you just have to say – we are glad to hear it. Good luck!

SIMILAR ARTICLES

Pure CSS3 LavaLamp Menu

115 196155
Page layout with Boostrap 3

0 25100

11 COMMENTS

  1. This isn’t 3D, it’s more of an optical illusion.

    You could have two points in a 1D line getting closer together, then further apart. The illusion that the viewer (camera) is getting further/closer is an optical illusion, yet no 3D protection is occurring.

    • 2 Derrick
      Yes, of course, this is simulation of 3D effect. You can`t view 3D on 2D monitor without special tools. But this was nice, isn`t it?
      And, I don`t used opengl book for my example, all by own hands

  2. For a 3D canvas, you will always need a third dimension (usualy declared as Z). This example uses X and Y = two dimensions, so the title doesn’t really fit.
    Concerning your last post: the term “3D” in webdesign doesn’t have any relation to the cinema-goggle-stuff like avatar.

  3. Hey. I don’t think that they refer to really generates “3D objects” on a screen. I think they are making references to the fact that 3D graphics are called to a particular type of graphics that uses maths calculations to be rendered, etc, etc.
    Anyway, nice post, we don’t need to focus on what it is not, but on the fact of what it is. It is a animated graphic generated on HTML5 Canvas, technology that NOT many developers know. Congrats!!! I will use it at example now that I’m trying to upgrade my knowledge on the topic.

  4. Ouch, I just dove into CSS3 animations and now I figure I’ll have to struggle with html5 canvas too… thanks!

Leave a Reply