Posts

Showing posts with the label Html5 Canvas

Create Cylinder Shape In Pure Css 3d

Answer : there are some advanced examples like these: http://x.dtott.com/3d/ http://cssdeck.com/labs/pure-css-3d-primitives and some useful CSS shapes like these: http://css-tricks.com/examples/ShapesOfCSS/ personally I built this simple one HTML <div class="tank"> <div class="bottom"></div> <div class="middle"></div> <div class="top"></div> </div> and CSS .tank{ position:relative; margin:50px; } .tank .middle{ width:120px; height:180px; background-color:#444; position:absolute; } .tank .top{ width: 120px; height: 50px; background-color:#666; -moz-border-radius: 60px / 25px; -webkit-border-radius: 60px / 25px; border-radius: 60px / 25px; position:absolute; top:-25px; } .tank .bottom{ width: 120px; height: 50px; background-color:#444; -moz-border-radius: 60px / 25px; -webkit-border-radius: 60px / 25px; bo...
Post a Comment
Read more

Can You Use Canvas.getContext('3d')? If Yes, How?

Answer : There is a 3D context for canvas, but it is not called "3d", but WebGL ("webgl"). WebGL should be available in the most up-to-date versions of all browsers. Use: <!DOCTYPE html> <html> <body> <canvas id='c'></canvas> <script> var c = document.getElementById('c'); var gl = c.getContext('webgl') || c.getContext("experimental-webgl"); gl.clearColor(0,0,0.8,1); gl.clear(gl.COLOR_BUFFER_BIT); </script> </body> </html> how could you use that? I tried 3D before, but didn't really understand if you think "real" languages are difficult, you will have a lot of trouble with WebGL. In some respects it is quite high level, in other respects it is quite low level. You should brush up on your maths(geometry) and prepare for some hard work. three.js is a very appreciated library that allows you to do yet a lot of 3d without dealing wit...
Post a Comment
Read more

Accessing JPEG EXIF Rotation Data In JavaScript On The Client Side

Image
Answer : If you only want the orientation tag and nothing else and don't like to include another huge javascript library I wrote a little code that extracts the orientation tag as fast as possible (It uses DataView and readAsArrayBuffer which are available in IE10+, but you can write your own data reader for older browsers): function getOrientation(file, callback) { var reader = new FileReader(); reader.onload = function(e) { var view = new DataView(e.target.result); if (view.getUint16(0, false) != 0xFFD8) { return callback(-2); } var length = view.byteLength, offset = 2; while (offset < length) { if (view.getUint16(offset+2, false) <= 8) return callback(-1); var marker = view.getUint16(offset, false); offset += 2; if (marker == 0xFFE1) { if (view.getUint32(offset += 2, false) != 0x45786966) { ...
Post a Comment
Read more