Interactive HTML5 parabola on Canvas
November 09, 2013 20:54:03 Last update: November 09, 2013 20:54:03
This page draws an interactive parabola on HTML5 Canvas.
- Code
- Demo
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #context, #control, #end { position: absolute; width: 10px; height: 10px; } #context { left: 120px; top: 150px; background-color: #dd0066; } #control { left: 280px; top: 50px; background-color: #0066dd; } #end { left: 380px; top: 150px; background-color: #66dd00; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript"> function drawParabola() { $('#myCanvas').each(function() { var context = this.getContext('2d'); context.beginPath(); context.moveTo( $('#context').position().left + 5, $('#context').position().top - 5 ); context.quadraticCurveTo( $('#control').position().left, $('#control').position().top, $('#end').position().left - 5, $('#end').position().top - 5 ); context.lineWidth = 1; // line color context.strokeStyle = 'black'; context.stroke(); }); } function clearCanvas() { $('#myCanvas').each(function() { var context = this.getContext('2d'); context.clearRect(0, 0, 578, 200); }); } $(function() { drawParabola(); $('#context, #control, #end') .draggable({ drag: function(event, ui) { clearCanvas(); drawParabola(); } }); }); </script> </head> <body> <div id="context"></div> <div id="control"></div> <div id="end"></div> <canvas id="myCanvas" width="578" height="200" style="border: #000 1px solid; background:url(http://www.dvd-ppt-slideshow.com/images/ppt-background/background-11.jpg) 100% 100%"></canvas> </body> </html>