WebFund 2014W Lecture 17

From Soma-notes
Revision as of 01:20, 4 April 2014 by Leah (talk | contribs)

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.

<script> // The following code draws a red box on the screen. 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).