Home > Developer > Web Develop
The canvas element is a new element in HTML5 that is specifically designed for graphical drawing. As with its name canvas, it's the equivalent of a canvas, where we can depict a variety of shapes.
The drawing pattern described here does not mean that we can visualize the drawing, but rather use JavaScript to manipulate it.
Here's a simple example of a canvas:
1. Add a canvas element to the page
First add a canvas element to the page, given its height, width, and unique ID<! DOCTYPE HTML >
<HTMLLang= "en"> <Head> <MetaCharSet= "UTF-8">
<script type= "Text/javascript" src= "Canvas.js" ></script>
</Head> <Bodyonload= "Draw (' canvas ')"> <H1>Canvas Element Example</H1> <CanvasID= "Canvas"width= "The "Height= "+"> </Canvas> </Body></HTML>
2. Draw a rectangle
In the Cavas.js file, do a draw rectangle operation:
functionDraw (id) {//1. Get the Canvas object varCanvasdom =document.getElementById (ID); if(Canvasdom = =NULL){ return false; } //2. Get Context varcontext = Canvas.getcontext (' 2d '); //3. Fill and draw the borderContext.fillrect (0, 0, 400, 300); //4. Set the drawing styleContext.fillstyle = ' #EEF ';//Fill Color //5. Set the line widthContext.linewidth = 1; //6. Specify a color valueContext.strokestyle = ' Blue ';//Set Border color //7. Draw a rectangleContext.fillrect (50, 50, 100, 100);//Fill RectangleContext.strokerect (50, 50, 100, 100);//draw a rectangular border}
Final effect
HTML5 Drawing Learning (1)--Introduction to the Canvas elements
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
