Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Canvas</title> <Scripttype= "Text/javascript"src=".. /js/jquery.js "></Script> <styletype= "Text/css"> *{margin:0;padding:0;Outline:None;Border:None; }#canvas{margin:Auto Auto;width:7rem;margin:. 25rem 0 0 1.5rem;Border:1px solid Black; } </style></Head><Body> <CanvasID= "Canvas"width= "+"Height= "All"></Canvas></Body></HTML><Scripttype= "Text/javascript"> /** * REM Layout initialization*/ $('HTML'). CSS ('font-size', $ (window). Width ()/( ten); /** Get canvas canvas * Get canvas drawing context*/ varCanvas= $('#canvas')[0]; varContext=Canvas.getcontext ('2d'); /** * Canvas-filled graphics (an example of an arrow)*/Context.beginpath (); Context.lineto ( $, $); Context.lineto ( -, $); Context.lineto ( -, -); Context.lineto ( the, -); Context.lineto ( -, -); Context.lineto ( -, -); Context.lineto ( $, -); //Context.lineto (200, 200);//When closed in this way, defects occur when the thickness of the line is widerContext.closepath ();//closed a graphic, no flaws, recommended useContext.fillstyle= 'Yellow'; //fills the color of the closed drawing,Context.fill ();//fill the graphic (the drawing will overwrite the previous graphic, and draw attention to the order of precedence)Context.linewidth= 5; Context.stroke (); //fill the graphic (the drawing will overwrite the previous graphic, and draw attention to the order of precedence)</Script>
HTML5 Canvas (drawing of filled graphics) Closepath, FillStyle, fill
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
