Canvas draw Cartesian coordinate system, canvas Cartesian coordinate system

Canvas draw Cartesian coordinate system, canvas Cartesian coordinate system
Canvas draw Cartesian coordinate system

March 17, 2017

Using canvas to draw a Cartesian coordinate system is actually quite simple. As long as the origin point () is determined, it can also be another point, as long as you know it is the origin point! After knowing the origin, draw two straight lines to the X axis and Y axis respectively (the X axis and Y axis are also opposite. This is based on your personal preferences and actual needs ).

Let's talk a little bit about the Code:

1 <! DOCTYPE html> 2 <! -- The width and height of canvas allow you to set the style in a line or Js. However, we recommend that you set the style in a line. -->
10 <script src = "js/drawChart. js" type = "text/javascript" charset = "UTF-8"> </script> 11 <! -- To separate the representation from the style and to make the page concise, introduce an external js file --> 12 <script type = "text/javascript"> 13 var canvas = document. getElementById ("canvas"); 14 var cxt = canvas. getContext ("2d"); 15 // get the canvas by id and obtain the cxt paint brush. Currently, the canvas only supports 2d effects, so "2d" cannot be saved; 16 17 var arr = [16, 15, 20, 21] // use an array to simulate the data of a bar chart 18 Coordinate (50,350); // write a Cartesian Coordinate system 19 ColumnChart1 (50,350, arr ); // a simple bar chart function 20/* to have a simple animation effect, the canvas is hidden after being drawn, and then slideDown () of jQuery is used () method fade-in display */21 $ ("# canvas "). hide (); 22 $ ("# canvas "). slideDown (1000); 23 </script> 24 </body> 25 
Then there is the method for drawing the Cartesian coordinate system (if the great God sees more comprehensive functions, the amount of code can be more streamlined, please kindly advise, thank you ):
1 function Coordinate (x, y) {2 // x indicates the starting point of the x Coordinate, and Y indicates the starting point of the y Coordinate. 3 var originX INX = x; 4 var originY = y; 5 // set the text style of the origin and draw 6 cxt. font = "2rem "; 7 cxt. fillText ("0", originX-10, originY + 15); // here-10 and + 15 are to adjust the word position 8 9 cxt. strokeStyle = "black"; // set the color of the x-axis Y-axis of the coordinate system, use the strockeStyle attribute to draw the line, and use the fillStyle attribute to draw the fill color block; 10 cxt. lineWidth = 3; // set the line width. Here, 3 pixels are set for convenience. You can adjust 11 as needed. // start to draw the Y axis 12 cxt. beginPath (); // enables path 13 cxt. moveTo (originX, originY); // the start point of the X axis and Y axis. lineTo (origeto, originY-320); // The end position of the axis, that is, the size of X remains unchanged, but the position of the Y point is changed (adjusted according to the actual situation); 15 cxt. stroke (); // draw this line 16 // draw a small arrow 17 cxt. moveTo (origeto, originY-320); // the start position of the Small Arrow is the end position of the Y axis 18 cxt. lineTo (origeto + 3, originY-310); // origeto + 3 and originY-310 are set to the end position of the Small arrow, the size and sharpness of the Small Arrow please explore 19 cxt. stroke (); 20 cxt. moveTo (origeto, originY-320); 21 cxt. lineTo (originX-3, originY-310); 22 cxt. stroke (); 23 // draw the abscissa 24 // draw the X axis and Y axis similar to 25 cxt. moveTo (originX, originY); 26 cxt. lineTo (orig511+ 450, originY); 27 cxt. stroke (); 28 // draw a small arrow 29 cxt. moveTo (originX + 450, originY); 30 cxt. lineTo (originX + 440, originY-3); 31 cxt. stroke (); 32 cxt. moveTo (originX + 450, originY); 33 cxt. lineTo (originX + 440, originY + 3); 34 cxt. stroke (); 35 cxt. fillText ("Y axis", originX-5, originY-325) 36}
The method for creating a bar chart is as follows:
Function ColumnChart1 (x, y, arr) {// clear the cxt occupied by the original bar chart before drawing. clearRect (x, y, 0); var arrColor = ["red", "yellow", "blue", "purple", "green", "mauve"]; // to make the color of each column different, use the # ****** or rgb () method to set the color, because I directly use words like this some browsers do not recognize individual colors (headache IE) // please be sure to keep x, y value and coordinate system x, y value is the same this. arr = arr; for (var I = 0; I <arr. length; I ++) {// for Loop used to traverse the data in the array if (I = 0) {var originX = x + 40; var originY = Y-1 ;} else {var originX = I * 70 + 80; var originY = Y-1;} cxt. beginPath (); cxt. strokeStyle = arrColor [I]; // sets the line color cxt. lineWidth = 20; // set the line width to 20 for convenience, so that the column cxt can be simulated. moveTo (originX + (I + 1) * 20, originY); // The vertex position of the column. Here, because the number in the array is small, it is multiplied by ten, this is conducive to the performance of small numbers cxt. lineTo (originX + (I + 1) * 20, originY-(arr [I] * 10); // adjust the spacing of each column; cxt. stroke (); cxt. font = "20px "cxt. fillText (arr [I], originX + (I + 1) * 20-10, originY-(arr [I] * 10 + 3); // draw cxt for text. font = "13px" cxt. fillText ("no." + (I + 1) + "quarterly", originX + (I + 1) * 20-35, originY + 20 )}}
If you want to make the chart look more beautiful, you can set the shadowColor, shadowOffsetX, shadowOffsetY, and other attributes provided by canvas.
At the same time, draw an elliptical color slightly different from that of the column at the center of the column vertex.