WebFund 2014W Lecture 17: Difference between revisions

From Soma-notes
Leah (talk | contribs)
No edit summary
Leah (talk | contribs)
No edit summary
Line 8: Line 8:




HTML Canvas Element
=== HTML Canvas Element ===
 
* Part of HTML5
* Part of HTML5
*  scriptable rendering of 2D shapes and bitmap images
*  scriptable rendering of 2D shapes and bitmap images


<canvas id="example" width="200" height="200">
  <canvas id="example" width="200" height="200">
</canvas>
  </canvas>


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


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


* Drawing a arc is similar in languages such as Processing.
* 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).
* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

Revision as of 01:26, 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
 <canvas id="example" width="200" height="200">
 </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).