WebFund 2014W Lecture 17
Jump to navigation
Jump to search
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.