Home > Developer > Web Develop
The canvas element is a new and important element in HTML5, designed to draw graphics.
The three steps required to draw a graphic using a canvas element in a page:
Step one uses the canvas element to create a canvas area and get the element.
Step Two obtains the context object for the graphical element by getting the canvas element.
Step three draws a graphic or animation on the page, based on the context object that was obtained.
1.1 Adding a canvas element to a page1.2 Drawing rectangles<id= "Cnvmain" width= "Max" height= " ></ Canvas >
To draw a rectangle using a canvas element:
1> getting the canvas element
Using the document.getElementById () method to get the canvas object, you need to call the method provided by this object for graphical drawing.
2> Get Context
When you are drawing, you need to use the graphics context, which is an object that encapsulates the drawing functionality. Use the GetContext () of the canvas object to get the graphics context. In the draw function, set the parameter to "2d".
3> Fill and Draw border
The canvas element draws a graphic in two ways: fill and draw the border (stroke), fill means fill the interior of the drawing, draw the border is the border of the drawing. The canvas element uses both of these methods to draw the graphic.
4> setting drawing styles (style)
When you draw a drawing, you must first set the drawing style, and then call the method for drawing.
Sets the fill graphic style: The style of the FillStyle fill, in which the fill's color value is filled in.
Sets the style of the graphic border: The style of the Strokestyle graphic border, in which the color value of the border is filled in.
5> Specifying line widths
Sets the width of the graphics border using the LineWidth property of the graphics context object. When drawing a graphic, any line can be specified by the LineWidth property to specify the width of the line.
6> Specifying a color value
Color or border color that is filled when drawing is specified by the FillStyle property and the Strokestyle property, respectively. Color values use the color values used in the CSS.
7> drawing rectangles
Use FillRect () with Strokerect () to fill the rectangle and draw a rectangular border.
Context.fillrect (x, y, width, height) context.strokerect (x, y, width, height)
HTML code
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>Index</title> <Scripttype= "Text/javascript">window.onload= function () { varCanvas=document.getElementById ("Canvas"); varContext=Canvas.getcontext ("2d"); Context.fillstyle= "#EEEEFF"; Context.fillrect (0, 0, -, -); Context.fillstyle= "Red"; Context.strokestyle= "Blue"; Context.linewidth= 1; Context.fillrect ( -, -, -, -); Context.strokerect ( -, -, -, -); } </Script></Head><Body> <CanvasID= "Canvas"width= "$"Height= "+"></Canvas></Body></HTML>
HTML5 Series: HTML5 Drawing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
