How to create Animated 3D canvas object in HTML5

How to create Animated 3D canvas object in HTML5

11 116130
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

[sociallocker]

download in package

[/sociallocker]


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

Understanding Closures

0 11755

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.

    • 2 MartinV
      I understand,
      this question already opened at http://groups.google.com/group/google-excanvas/browse_thread/thread/3d8bb121f03a5035
      but still nobody using canvas.getContext(‘3d’) . Anywhere using 2d (in web) to make 3d effects, even samples at:
      http://deanm.github.com/pre3d/
      I tried to show you easy sample how to start understanding it.

  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 to admin Cancel reply