使用js画图

原理：利用1px*1px的div画图

 

 

 <script type="text/javascript">
            function makedot(x, y) {  //画点函数  
                document.write("<div style='height:1px;width:1px;  position:absolute;left:" + x + "px;top:" + y + "px;background:#fff;overflow:hidden'></div>")
            }

            /**  
            函数功能：根据给定的圆心和半径画圆  
            函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。  
            */
            function circle(x, y, r) {  //(x,y)圆心，r半径  
                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 rect(x, y, w, h) {  //(x,y)左上角坐标,w,h 宽与高  
                for (var i = 0; i < w; i++) {
                    makedot(x + i, y);
                    makedot(x + i, y + h);
                }
                for (var i = 0; i < h; i++) {
                    makedot(x, y + i);
                    makedot(x + w, y + i);
                }
            }

            /**  
            函数功能：根据两点坐标画直线。  
            函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理  
            */
            function line(x1, y1, x2, y2) {
                var slope = (y2 - y1) / (x2 - x1);  //斜率  
                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 {  //画垂直线  
                    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 triangle(x1, y1, x2, y2, x3, y3) {
                line(x1, y1, x2, y2);
                line(x2, y2, x3, y3);
                line(x1, y1, x3, y3);
            }

            /**  
            函数功能：根据给定的一系列坐标点画多边形  
            函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线  
            */
            function polygon() {
                var args = arguments.length;
                if (args % 2 != 0) return -1;
                var realargs = args / 2;  //坐标个数  
                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>