HTML5 Brief Introduction

Today's to sayHTML5a unique elementCanvas, designed to allowWebvector images on the page do not need to rely onFlashor other plugins that you use on your Web pageCanvaselement, it creates a rectangular area with the default300*150, of course, can be customized as well. CanvasThe coordinates in are from the upper left corner,xthe axis extends horizontally (by pixel) to the right,yThe axis is stretched downward in the vertical direction. The upper-left corner coordinates arex=0,y=0point is called the origin point.

canvas HTML5 element not supported by some browsers, that canvas canvas canvas General styles, such as borders, margins, You can use the css syntax to define, The text that is added internally, the style defaults to the canvas

Let's talk about the use of the canvas API , start with an example, draw a diagonal line in the canvas : First put a Canvas Elements then start the line in the JavaScript script,

function drawdiagonal () {

get the canvas element and its drawing context

var canvas = document.getelementbyidx_x ("diagonal");

var context = Canvas.getcontext (' 2d ');

create a path with absolute coordinates

Context.beginpath ();

Context.moveto (10,140);

Context.lineto (140,70);

draw this line onto the canvas

Context.stroke ();

}

Window.addeventlistener ("Load", drawdiagonal,true);

The effect is as follows:

Although relatively simple, it shows the use of the HTML5 canvas APIimportant process. First throughIDGetCanvasaccess, and then define aContextvariables, callingCanvasobject thatGetContextmethod and pass in the desiredCanvastype. Three methods were called in the code--beginpath,MoveToand theLineTo, the coordinates of the start and end point of the line are passed in.

Canvas 's powerful features far more than these, of course, is limited to space, there is not much to say, recommend everyone a book, "HTML5 Advanced Program Design" written in very detailed, suitable for beginners to read carefully.

HTML5 Brief Introduction