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 nodes here can be understood as the path tool points out in PhotoShop, points) cxi. fill (); the "starting point", "first node", and "second node" are drawn. Three vertices are directly linked. 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;
From Captain op
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
