Self-study HTML5 fourth (canvas canvas)

Canvas Canvas seems to be the essence of HTML5, we must learn, well, the beautiful things will start from the foundation ....

Let's see what it's called canvas.

What is Canvas?

The HTML5 canvas element uses JavaScript to draw an image on a Web page.

The canvas is a rectangular area where you can control each pixel.

Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

Create a canvas

Add a canvas element to the HTML5 page.

Specify the ID, width, and height of the element:

<canvas id= "MyCanvas" width= "height=" ></canvas>

Drawing of rectangles

The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas");    Use the ID to find the canvas element: Var cxt=c.getcontext ("2d");      Create a Context object: GetContext ("2d") object is a built-in HTML5 object with multiple drawing paths, rectangles, circles, characters, and methods for adding images
Cxt.fillstyle= "#FF0000";     The code draws a red rectangle:    
Cxt.fillrect (0,0,150,75);</script>

1. FillRect ()

2. Strokerect ()

Lines

Draw a line by specifying where to start and where to end it:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.moveto (10,10); Cxt.lineto (150,50); Cxt.lineto (10,50); Cxt.stroke ();</script>

<canvas id= "MyCanvas" width= "" "height=", "style=" border:1px solid #c3c3c3; >your Browser does not support the canvas element.</canvas>

1. LineWidth

round

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.fillstyle= "#FF0000"; Cxt.beginpath (); Cxt.arc (70,18,15,0,math.pi*2,true); Cxt.closepath (); Cxt.fill (); </ Script>

Gradient

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); var grd= Cxt.createlineargradient (0,0,175,50); Grd.addcolorstop (0, "#FF0000"); Grd.addcolorstop (0.5, "#00FF00");
Grd.addcolorstop (1, "#212121"); Cxt.fillstyle=grd;cxt.fillrect (0,0,175,50);</script>

<canvas id= "MyCanvas" width= "" "height=", "style=" border:1px solid #c3c3c3; >your Browser does not support the canvas element.</canvas>

Image

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); var img= New Image () img.src= "Flower.png" Cxt.drawimage (img,0,0);</script>

Self-study HTML5 fourth (canvas canvas)