Wake up in the morning suddenly want to write a drawing function, previously seen on the internet someone did, but are made with VML, only IE support.
This is the absolute location of the <div> to draw the point, compatible with a variety of browsers.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" Te xt/html; Charset=utf-8 "/> <title>untitled 1</title> <style type=" Text/css "> Style1 {font-size: X-small; } </style> </pead> <body> <span class= "Style1" > <script type= "Text/javascript" > function Makedot (x,y) {//DOT functions document.write ("<div +x+" px;top: "+y+" Px;width:1px;background: #f00; overflow: Hidden ' ></div> '}/** function: Draw a circle function according to the given center and radius: according to the radius and center coordinates, use the mathematical method to calculate the coordinates of each point from 0 ° to 360° and draw them. */function Circle (x,y,r) {//(X,y) Center, R radius var dotx,doty,radio; var Pi=math.pi; Makedot (X,y); for (Var i=0;i<360;i+=0.5) {radio=i*pi/180; Dotx=r*math.cos (radio) +x; Doty=r*math.sin (radio) +y Makedot (Dotx,doty); } } /** function function: Draws a rectangle based on the upper-left corner coordinate and the long width of the pointing rectangle. Function thought: According to the upper left coordinate and the long width, calculates the horizontal longitudinal edge each point coordinates/function rect (x,y,w,h) {//(X,Y) the upper left corner coordinate, w,h width and the high for (Var i=0;i<w;i++) {Makedot (X+i,y); Makedot (X+I,Y+H); for (Var i=0;i<p;i++) {Makedot (x,y+i); Makedot (X+w,y+i); /** function: Draws a line based on two-point coordinates. Function: According to the two point of the coordinates of the computer slope, and then based on the first point coordinates and slope to calculate a bit of the line and then draw the line. Vertical Line Special Handling */function lines (x1,y1,x2,y2) {var slope= (y2-y1)/(X2-X1); slope var diff=x2-x1; if (x1<x2) {for (Var i=0;i<diff;i++) {Makedot (x1+i,y1+slope*i); }}else if (x1>x2) {for (Var i=0;i>diff;i--) {Makedot (x1+i,y1+slope*i); }else{//Draw vertical line Var temp=y2-y1; if (temp>0) {for (Var i=0;i<temp;i++) {Makedot (x1,y1+i); }}else{for (Var i=0;i>temp;i--) {Makedot (x1,y1+i); /** function function: According to the given three point coordinates to draw the triangle function idea: directly use the line function to draw three lines can be/function triangle (x1,y1,x2,y2,x3,y3) { Line (x1,Y1,X2,Y2); Line (X2,Y2,X3,Y3); Line (X1,Y1,X3,Y3); /** function function: To draw a polygon function based on a given set of coordinates: loop read the coordinate point, between the current coordinate point and the next sitting punctuation line/function polygon () {var Args=arguments.leng Th if (args%2!=0) return-1; var realargs=args/2; Number of coordinates for (Var i=0;i<realargs-1;i++) {line (arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]) ; Line (arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]); } circle (500,500,200); Rect (100,100,200,100); Triangle (200,200,100,400,300,400); Polygon (300,300,400,100,600,100,700,300,600,500,400,500); </script> </span> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
