Home > Developer > JavaScript
<!DOCTYPE HTML><HTML><Head> <Metaname= "description"content= "HTML5 Canvas Graphics and Animation Video 1" /> <MetaCharSet= "Utf-8"> <title>HTML5 Canvas Graphics and Animation</title></Head><Body><CanvasID= "Canvas"width= "All"Height= "All"></Canvas><Scriptsrc= "App.js"></Script></Body></HTML>
/** * Created by Answer1215 on 3/19/2015.*/window.onload=function() { //var canvas = $ ("#canvas") [0]; //var canvas = document.getelmenetbytagname ("canvas") [0]; varCanvas = document.getElementById ("Canvas"), Context= Canvas.getcontext ("2d"); Canvas.width= 400; Canvas.height= 700; //Context.fillrect (Ten, ten, +);/**/Context.beginpath (); Context.moveto (100,100);//without draw any line;Context.lineto (300, 100); Context.lineto (300, 200); Context.lineto (100, 200); Context.lineto (100, 100); Context.closepath (); Context.stroke (); //Context.fill (); Fill () would also close the path for you //If you use the Fill (), you don ' t need Closepath (); //to close the path later, just remember to close it every times./**//**/Context.rect (100,100,100,300);//Make a rect and stroke itContext.stroke (); Context.fillrect (100,100,100,300);//Fill RectContext.strokerect (100,100,100,300);//Draw RectContext.clearrect (100,100,100,300);//Clean the canvas*/};
[Javascript] Drawing Paths-lines and rectangles
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
