Function draw (){ VaR Canvas = Document. getelementbyid ( " Canvas " ); VaR CXI = canvas. getcontext ( " 2d " ); CXI. fillstyle = " RGB (200,0, 0) " ; CXI. beginpath (); CXI. moveTo ( 75 , 50 ); CXI. lineto ( 100 , 85 ); CXI. lineto ( 100 , 20 ); CXI. Fill ();}
<Body onload = "Draw ();">
<Canvas id = "canvas" width = "150" Height = "150"> </canvas> <br>
</Body>
CXI. beginpath (); initialize path painting;
CXI. moveTo (); Determine the "Starting Point" coordinate of the path;
CXI. lineto (); Determine the coordinates of another "Node;
CXI. lineto (); Determine the coordinates of the other two "nodes;
(The node here can be understood as the path tool in Photoshop)
CXI. Fill (); the "starting point", "first node", and "second node" drawn are directly linked to a total of three points. Form a triangle. For example;
A point on the left of the triangle is: CXI. moveTo );
A point above the triangle is: CXI. lineto );
A point below the triangle is: CXI. lineto );
The parameter coordinates here are the coordinates 0. 0 relative to the canvas element, that is, the upper left corner;
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
