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!
Great article, people must update their knowledge as soon as possible
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.
This is NOT 3D. If you think this is 3D, you need to read a Linear Algebra, and OpenGL book.
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
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.
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.
Ouch, I just dove into CSS3 animations and now I figure I’ll have to struggle with html5 canvas too… thanks!
Great!!
but also check this: http://www.djyarus.info
pure HTML5 / CSS3 / JavaScript + 3D Canvas ))
Pretty awesome!!! Congrats for your hard work
I like it Canvas in Site Footer Android[dot]Com, dance robot … Lol