Difference between revisions of "WebFund 2014W Lecture 17"
Jump to navigation
Jump to search
| 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> | ||
<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 21:26, 3 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).