Created
November 30, 2012 20:12
-
-
Save adrianseeley/4178283 to your computer and use it in GitHub Desktop.
HTML5 Canvas Dynamic Content + Follow Mouse
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
| <html> | |
| <div align = 'center'> | |
| <canvas | |
| id = 'c' | |
| width = '800' | |
| height = '600' | |
| style = 'border:1px solid #000000;'> | |
| </canvas> | |
| <script> | |
| var content = []; | |
| content.push({color: '#ff00ff', text: 'Lorem Ipsum Doptum Incun Roun Varun', image: ''}); | |
| content.push({color: '#00ddff', text: '', image: 'bombard.png'}); | |
| content.push({color: '#aaaa00', text: 'Lorem Ipsum Doptum Incun Roun Varun', image: 'bombard.png'}); | |
| content.push({color: '#00aabb', text: 'Lorem Ipsum Doptum Incun Roun Varun', image: 'bombard.png'}); | |
| var clear_color = '#eeeeee'; | |
| var scroll_backer_color = '#ff0000'; | |
| var scroll_backer_alpha = 1.0; | |
| var scroll_size = 0.2; | |
| var scroll_offset = 0; | |
| var content_backer_alpha = 1.0; | |
| var content_width = 0.3; | |
| var canvas = document.getElementById('c'); | |
| var draw = canvas.getContext('2d'); | |
| var mouse_is_down = false; | |
| var mouse_x = 0; | |
| var mouse_y = 0; | |
| canvas.addEventListener("mousemove", mouse_move, false); | |
| do_draw(); | |
| function mouse_down(e) | |
| { | |
| mouse_is_down = true; | |
| mouse(e); | |
| } | |
| function mouse_move(e) | |
| { | |
| mouse(e); | |
| } | |
| function mouse_up(e) | |
| { | |
| mouse_is_down = false; | |
| mouse(e); | |
| } | |
| function mouse(e) | |
| { | |
| var x; | |
| var y; | |
| if (e.pageX != undefined && e.pageY != undefined) | |
| { | |
| x = e.pageX; | |
| y = e.pageY; | |
| } | |
| else | |
| { | |
| x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; | |
| y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; | |
| } | |
| x -= canvas.offsetLeft; | |
| y -= canvas.offsetTop; | |
| mouse_x = x; | |
| mouse_y = y; | |
| update(); | |
| } | |
| function update() | |
| { | |
| scroll_offset = mouse_x / canvas.width; | |
| do_draw(); | |
| } | |
| function do_draw() | |
| { | |
| clear(); | |
| draw_content(); | |
| draw_scroll_backer(); | |
| } | |
| function clear() | |
| { | |
| draw.globalAlpha = 1; | |
| draw.fillStyle = clear_color; | |
| draw.fillRect(0, 0, c.width, c.height); | |
| } | |
| function draw_content() | |
| { | |
| for(var c = 0; c < content.length; c++) | |
| { | |
| draw_content_backer(scroll_offset + (c * content_width), scroll_offset + ((c + 1) * content_width), content[c].color); | |
| } | |
| } | |
| function draw_content_backer(start, end, color) | |
| { | |
| draw.globalAlpha = content_backer_alpha; | |
| draw.fillStyle = color; | |
| draw.fillRect(c.width * start, 0, c.width * end, c.height - (c.height * scroll_size)); | |
| } | |
| function draw_scroll_backer() | |
| { | |
| draw.globalAlpha = scroll_backer_alpha; | |
| draw.fillStyle = scroll_backer_color; | |
| draw.fillRect(0, c.height - (c.height * scroll_size), c.width, c.height); | |
| } | |
| </script> | |
| </div> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment