H5 's Canvas

Canvas is a new component of HTML5, it is like a curtain, you can use JavaScript to draw a variety of charts, animations and so on.

before using canvas, canvas.getContext Use the to test whether the browser supports canvas:

<!--HTML code --<canvas id="Test-canvas" width=" heigth="100 "><p>your browser does not support canvas</P> </canvas>
 var canvas = document.getElementById (' Test-canvas '); if (canvas.getcontext) {alert (' Your browser supports canvas! ');} else {alert (' Your browser does not support canvas! ');} 

getContext(‘2d‘)方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。

var ctx = canvas.getContext(‘2d‘);

Drawing shapes

We can draw various shapes on the canvas. Before we draw, we need to look at the coordinate system of the canvas:

The coordinates of the canvas are the origin in the upper-left corner, the x-axis horizontally to the right, and the y-axis vertically downward, in pixels, so each point is a non-negative integer.

CanvasRenderingContext2DObjects have several ways to draw graphics:

var canvas = document.getElementById (' Test-shape-canvas '), CTX = Canvas.getcontext (' 2d '); /span>

Ctx.clearrect (0, 0, 200, 200); Erase (0,0) a rectangle with a position size of 200x200, which means to change the area to transparent Ctx.fillstyle = ' #dddddd '; Set the color Ctx.fillrect (10, 10, 130, 130); Paint a rectangle (10,10) with a position size of 130x130//use path to draw a complex path: Var path=new path2d ();p ath.arc (0, math.pi*2, True);p Ath.moveto ( 110,75);p Ath.arc (0, 5, 0, Math.PI, false);p Ath.moveto (+/--);p Ath.arc (approx.), 9 5);p Ath.arc (5, 0, math.pi*2, true); Ctx.strokestyle = ' #0000ff '; ctx.stroke (path);

Canvas read: 11340

Canvas is a new component of HTML5, it is like a curtain, you can use JavaScript to draw a variety of charts, animations and so on.

Without canvas, drawing can only be implemented with flash plug-ins, and pages have to interact with JavaScript and Flash. With canvas, we don't need flash anymore, just use JavaScript to finish drawing.

A canvas defines a rectangular box of a specified size, within which we can draw as freely as possible:

<canvas id="test-canvas" width="300" height="200"></canvas>

because the browser does not support HTML5 standards, it is usually <CANVAS> add some descriptive HTML code inside, and if the browser supports canvas, it ignores <CANVAS> internal HTML, if the browser does not support canvas, it will display <CANVAS> internal HTML:

 <canvas  id  = "Test-stock"  width  = height  = ;   <p ;  current Price:25.51</< Span class= "title" >p ;  </canvas ;   

before using canvas, use canvas.getcontext to test whether the browser supports canvas:

 <!--HTML code--  <canvas  id  = "Test-canvas"  width  =" $ " heigth  = >  <p ;  your browser does not support Canvas</p ;  </canvas ;   

getContext(‘2d‘)Method allows us to get an CanvasRenderingContext2D object, and all the drawing operations need to be done through this object.

var ctx = canvas.getContext(‘2d‘);

What if I need to draw 3D? HTML5 also has a WEBGL specification that allows 3D graphics to be drawn in the canvas:

gl = canvas.getContext("webgl");

In this section we focus only on drawing 2D graphics.

Drawing shapes

We can draw various shapes on the canvas. Before we draw, we need to look at the coordinate system of the canvas:

The coordinates of the canvas are the origin in the upper-left corner, the x-axis horizontally to the right, and the y-axis vertically downward, in pixels, so each point is a non-negative integer.

CanvasRenderingContext2DObjects have several ways to draw graphics:

Canvas is a new component of HTML5, it is like a curtain, you can use JavaScript to draw a variety of charts, animations and so on.

H5 's Canvas