Created
February 16, 2013 21:42
-
-
Save ijason/4968858 to your computer and use it in GitHub Desktop.
HTML5 - canvas element used to create a looping panoramic image scroller.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <?php include("Includes/metadata.php"); ?> | |
| <body style="width=100%"> | |
| <div style="text-align:center;"> | |
| <h1>HTML5 - Panoramic Image Scroller</h1> | |
| <br /><br /> | |
| <div><canvas id="canvas" width="800" height="400"></canvas></div> | |
| <br /><br /> | |
| <p>Image taken at Code Magazine's State of .NET event in Austin, Texas</p> | |
| </div> | |
| <!-- Le javascript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| <script type="text/javascript"> | |
| var img = new Image(); | |
| //User Variables | |
| img.src = '/Media/StateOfDotNET.JPG'; | |
| var CanvasXSize = 800; //width of canvas element | |
| var CanvasYSize = 400; //height of canvas element | |
| var speed = 30; //lower is faster | |
| var scale = 1.05; | |
| var y = -4.5; //vertical offset | |
| var dx = 0.75; | |
| var imgW; //image width | |
| var imgH; //image height | |
| var x = 0; | |
| var clearX; | |
| var clearY; | |
| var ctx; //canvas element | |
| img.onload = function() { | |
| imgW = img.width*scale; | |
| imgH = img.height*scale; | |
| if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas | |
| if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas | |
| else { clearX = CanvasXSize; } | |
| if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas | |
| else { clearY = CanvasYSize; } | |
| //Get Canvas Element | |
| ctx = document.getElementById('canvas').getContext('2d'); | |
| //Set Refresh Rate | |
| return setInterval(draw, speed); | |
| } | |
| function draw() { | |
| //Clear Canvas | |
| ctx.clearRect(0,0,clearX,clearY); | |
| //If image is <= Canvas Size | |
| if (imgW <= CanvasXSize) { | |
| //reset, start from beginning | |
| if (x > (CanvasXSize)) { x = 0; } | |
| //draw aditional image | |
| if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); } | |
| } | |
| //If image is > Canvas Size | |
| else { | |
| //reset, start from beginning | |
| if (x > (CanvasXSize)) { x = CanvasXSize-imgW; } | |
| //draw aditional image | |
| if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); } | |
| } | |
| //draw image | |
| ctx.drawImage(img,x,y,imgW,imgH); | |
| //amount to move | |
| x += dx; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment