Home › Interactive HTML5 parabola on Canvas

Interactive HTML5 parabola on Canvas  

James
Joined:
02/21/2009
Posts:
172

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>
Share |
| Comment  | Tags