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]; varCXT=Canvas.getcontext ('2d'); /** * Canvas method for drawing rectangles one * RECT (upper left-hand axis of rectangle, vertical axis of rectangle, width of rectangle, height of rectangle) * This method only describes the path of the rectangle, it needs to call the line drawing or Fill method to function */Cxt.fillstyle= 'Yellow'; Cxt.rect ( $, -, -, -); //Cxt.stroke ();Cxt.fill (); /** * The method of drawing the rectangle two * FillRect (the rectangle's upper left-pointing axis, the rectangle's upper-left-pointing ordinate, the width of the rectangle, the height of the rectangle) * Strokerect (Rectangle's upper left-pointing axis, the rectangle's upper left-pointing ordinate, the width of the rectangle, The height of the rectangle) * These two methods will draw the graph directly*/Cxt.fillstyle= 'Red'; //Cxt.strokerect ( +----);Cxt.fillrect ( -, $, -, -);</Script>
HTML5 Canvas (Rectangle Drawing) Rect, Strokerect, FillRect
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
