Tutorial 1 HTML 5 Canvas
In this unit, we are going to use WebGL API to develop 3D graphics for web applications. This API is developed in and for JavaScript and use HTML 5 canvas to create and draw 3D graphics. Therefore, developing a WebGL application will involve programming in JavaScript and HTML. In this and the next tutorials, we will cover the necessary skills needed. You do not have to have extensive knowledge of JavaScript or HTML to succeed in this unit, but some experience of them will be helpful.
1. Brief into to HTML 5 (http://en.wikipedia.org)
The HTML5 is a markup language used for structuring and presenting content for World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997) and is a candidate recommendation of the WWW Consortium (W3C). Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (e.g., web browsers). HTML5 is a candidate for cross- platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. HTML5 adds many new syntactic features. These include the new

Copyright By PowCoder代写 加微信 powcoder

The HTML programming skills that we need in this unit is minimal: create a simple HTML document and the use of canvas, scripts, events handling and some Document Object Model (DOM) objects.
2. JavaScript
JavaScript was originally developed by Netscape, a browser competed with the internet explorer. It is an interpreted computer programming language. As part of web browsers, implementations allow client-side scripts to interact with the user, control the browser, and alter the document content that is displayed. It has also become common in server-side programming, game development and the creation of desktop applications. JavaScript is a scripting language with dynamic typing. JavaScript copies many names and naming conventions from Java.
We will not be able to introduce the full features of the language. Our introduction of JavaScript will be focussing on the key elements that are important to us: important data types and constructs and their behaviour, e.g., variables, arrays, and functions.
Any text-editing tool will suit for creating HTML and JavaScript documents, e.g., Notepad or Textpad. More sophisticated and professional tools are available if you have access to them, e.g., CoffeeCup HTML editor and NetBeans IDE (free). Such tools are handy when you

debug complicated applications and organise large projects. For this unit, any of the above tools will do.
Screen shot of NetBeans IDE for Mac.
Debugging tools
It is unlikely that your document will contain no bugs when you load them to the browsers for the first time. Without using a proper tool, debugging is largely a guesswork that requires experience. Debugging tools come with browsers, although sometimes you may need to download and install them as plugins/add-ons separately.
4. Create a simple HTML document
HTML is a markup language, which consists of a set of markup tags. The tags describe document content. A HTML documents contain HTML tags and plain text. Below is a simple HTML5 document, shows the structure of a typical HTML document:

My First Heading

My first paragraph.

• The DOCTYPE declaration defines the document type, which is HTML
• The text between and describes the web page

• The text between and is the visible page content
• The text between

and

is displayed as a heading (

…

indicate the
sizes of the font)
• The text between

and

is displayed as a paragraph
5. HTML Canvas
A canvas is a rectangular area on an HTML page, where 2D or 3D graphics can be drawn. The canvas is a two-dimensional grid. Its coordinate system has the origin (0, 0) at the upper- left corner of the canvas, x axis is horizontal and y axis is vertical (in pixels). However, the element has no drawing abilities of its own (it is only a container for graphics) – you must use a script to actually draw the graphics. The getContext() method returns an object that provides methods and properties for drawing on the canvas.
A canvas is specified with the tag. We always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. By default, the element has no border and no content. A HTML document can have multiple canvases. The following snippet define a canvas of width 200, height 100 with a border of solid line of 1 pixel in width and black in colour:

Draw onto the Canvas with JavaScript
All drawing on the canvas must be done inside a JavaScript:

• var c=document.getElementById(“myCanvas”) retrieves the canvas object
• var ctx=c.getContext(“2d”) retrieves the built-in HTML 5 object, 2D context, with many
properties and methods for drawing paths, boxes, circles, text, images, and more. When draw 3D
graphics, you must retrieve “3D” context, like getContext(“webgl”) .
• ctx.fillStyle=”#FF0000″; sets the colour to draw. The default fillStyle is #000000
ctx.fillRect(0,0,150,75); draws a rectangle filled with the current fill style.
Draw paths
To draw straight lines on a canvas, we will use the following methods:
• moveTo(x,y) defines the starting point of the line
• lineTo(x,y) defines the ending point of the line
• stroke () specifies that the drawing method will be “pen stroke” instead of “fill”.

Draw a Circle
To draw a circle on a canvas, we will use the method arc(x, y, r, start_angle, stop_angle)),
where the angles are in radians.
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath(); //begins a path
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke(); // or use ctx.fill() to draw a solid circle.
We can draw text using the methods fillText(text, x, y) or strokeText(text, x, y) with the specified font, where (x,y) is the position of the lower left corner of the text:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”; //30 pixels in height ctx.fillText(“Hello World”, 10, 35); ctx.rotate(20*Math.PI/180);//rotate the canvas by 20 degrees ctx.strokeText(“Hello World”, 10, 35);
Draw gradients
Shapes on the canvas are not limited to solid colors. Gradients can be used to fill rectangles, circles, lines, text, etc. There are two different types of gradients:
• createLinearGradient(x,y,x1,y1) – Creates a linear gradient with starting point (x,y) and ending point (x1,y1)
• createRadialGradient(x,y,r, x1,y1,r1) – Creates a radial/circular gradient with (x,y,r) defining the starting circle and (x1, y1, r1) defining the ending circle
• Once we have a gradient object, we must add two or more colour stops. The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”);
// Create a gradient use one of the following method
var grd=ctx.createLinearGradient(0, 0, 200, 0);//linear gradient //var grd=ctx.createRadialGradient(75, 50, 5, 90, 60, 100);//radial gradient
grd.addColorStop(0,”red”); grd.addColorStop(1,”white”);
// Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
Draw images
To draw an image on a canvas, we will use the method drawImage(image,x,y), where (x,y), is the position of the up-left corner of the image on the canvas.