Home > Developer > Web Develop
HTML5 Canvas elements use JavaScript to draw images on a Web page. let's start with a simple example and (Figure 1):
<!DOCTYPE HTML><HTML> <Head> <styletype= "Text/css">Canvas{Border:dashed 2px #CCC} </style> <Scripttype= "Text/javascript"> /*The canvas element itself has no drawing capability. All drawing work must be done in JavaScript*/ functionDrawRect () {varC=document.getElementById ("MyCanvas"); /*Create a Context object (built-in HTML5 object with multiple drawing paths, rectangles, circles, characters, and methods for adding images)*/ varCXT=C.getcontext ("2d"); /*draws a yellow rectangle and specifies the position and size*/Cxt.fillstyle="Yellow"; Cxt.fillrect ( +, +, -, -); } </Script> </Head> <Bodyonload= "DrawRect ();"> <!--The Canvas is a rectangular area (the dotted box in the figure), where the ID, width, and height are set - <CanvasID= "MyCanvas"width= "+"Height= "$"></Canvas> </Body></HTML>
Figure 20 percent the implementation of the line (only the code in DrawRect () needs to be replaced):
var C=document.getelementbyid ("MyCanvas" var Cxt=c.getcontext ("2d" /* MoveTo (): Moves the path to the specified point in the canvas without creating a line */ cxt.moveto ( 10,10 /* LineTo (): Add a new point and create a line from that point to the last specified point in the canvas */ cxt.lineto ( 150,50 10,50< Span style= "color: #000000;" >); /* stroke (): Draw a defined path */ cxt.stroke (); Figure 3 Implementation (only need to replace the code in DrawRect () ):
varC=document.getelementbyid ("MyCanvas");varCxt=c.getcontext ("2d"); Cxt.fillstyle= "#CCCCCC";/*Beginpath (): Start a path or reset the current path*/Cxt.beginpath ();/*The parameters of Arc () are: center x and y coordinates, RADIUS, start and end angle (radians), counterclockwise*/Cxt.arc (150,100,50,0,math.pi*1.5,false);/*Closepath (): Creates a path from the current point back to the starting point*/Cxt.closepath ();/*Fill (): Fills the current drawing (path)*/Cxt.fill ();
Resources:
http://www.w3school.com.cn/
Http://www.w3school.com.cn/tags/html_ref_canvas.asp
Http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html
Continue to learn in ...
HTML5 Canvas Primer
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
