WebFund 2014W Lecture 17: Difference between revisions

Revision as of 01:40, 4 April 2014

The video from the lecture given on March 14, 2014 is available:

adventure-editor-class is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).

HTML Canvas Element

Part of HTML5
scriptable rendering of 2D shapes and bitmap images
We first set up a HTML canvas widget
Give it a name (ID), and dimensions

 <canvas id="example" width="200" height="200">
 We put some text here to display if browser does not support HTML5 canvas.
 </canvas>

We can use Javascript to draw on the canvas.
The following code draws a red box on the screen.

 <script>
   var example = document.getElementById('example');
   var context = example.getContext('2d');
   context.fillStyle = 'red';
   context.fillRect(30, 30, 50, 50)
   //The following code draws a circle.
   context.beginPath();
   context.arc(100, 75, 50, 0, 2 *Math.PI);
   context.stroke();
 </script>

Drawing a arc is similar in languages such as Processing.
Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

To use JQuery, we need to add it in the <head>

 <script src="http://code.jquery.com/jquery-1.11.0.min,js"></script>

We can now use JQuery and write

   var example = $('example');
   var context = example[0].getContext('2d');

To use javascript we need to get the canvas object.
We have to get the standard object out of the JQuery object (what the [0] is).
Must use getContext(). In this case the parameter is "2d", we could also use 3d (WebGL) and others.
Then we can use context.arc, context.fillStyle etc. for example to drawing things.

@@ Line 12: / Line 12: @@
 * Part of HTML5
 *  scriptable rendering of 2D shapes and bitmap images
+* We first set up a HTML canvas widget
+* Give it a name (ID), and dimensions
    <canvas id="example" width="200" height="200">
+  We put some text here to display if browser does not support HTML5 canvas.
    </canvas>
@@ Line 34: / Line 37: @@
 * Drawing a arc is similar in languages such as Processing.
 * Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).
+* To use JQuery, we need to add it in the <head>
+  <script src="http://code.jquery.com/jquery-1.11.0.min,js"></script>
+* We can now use JQuery and write
+    var example = $('example');
+    var context = example[0].getContext('2d');
+* To use javascript we need to get the canvas object.
+* We have to get the standard object out of the JQuery object (what the [0] is).
+* Must use getContext(). In this case the parameter is "2d", we could also use 3d (WebGL) and others.
+* Then we can use context.arc, context.fillStyle etc. for example to drawing things.