求高效的js画圆代码讨论第2页: - javascript研究小组

群组首页 → Web前端 → javascript研究小组 → 论坛

发表回复

求高效的js画圆代码

fuyun 2009-05-15

这个问题已经有了眉目,现在正在研究svg...顺带看看Canvas...

说明一下,好像svg本身就是一种图片格式...呵呵~

vlinux 2009-05-15

哦，那祝你早日练成葵花宝典～～哈

fuyun 2009-05-15

vlinux 写道

哦，那祝你早日练成葵花宝典～～哈

呵呵...

只要不走火入魔就ok了~~
先来一招葵花点穴手...

Relucent 2009-06-07

是这个意思吗？纯JS画图

<script type='text/javascript'>   

    /*圆形算法*/  
    function drawOval(left, top, radius)   
    {   
    		var _html ='',a = radius>>1, b = radius>>1,wod = radius&1, hod = (radius&1)+1,cx = left+a, cy = top+b,x = 0, y = b,aa = (a*a)<<1, bb = (b*b)<<1,st = (aa>>1)*(1-(b<<1)) + bb,tt = (bb>>1) - aa*((b<<1)-1),ox = 0, oy = b,w, h,pxl, pxr, pxt, pxb, pxw;   
        while (y > 0)   
        {   
            if (st < 0)   
            {   
                st += bb*((x<<1)+3);   
                tt += (bb<<1)*(++x);   
            }   
            else if (tt < 0)   
            {   
                st += bb*((x<<1)+3) - (aa<<1)*(y-1);
                tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3);   
                w = x-ox;   
                h = oy-y;   
                if (w-1)   
                {   
                    pxw = w+2;   
                    h = 1;   
                }   
                else if (h-1)   
                {   
                    pxw = 1;   
                    h += 1;   
                }   
                else pxw = h = 1;   
    						/*八对称点圆弧算法*/  
								_html += "<i style='background-color:#FF0000;position:absolute;overflow:hidden;left:"+((ox-pxw+w+wod)+cx)+"px;top:"+((-oy)+cy)+"px;width:"+pxw+"px;height;"+h+"px'></i><i style='background-color:#FF0000;position:absolute;overflow:hidden;left:"+((0-x+1)+cx)+"px;top:"+((-oy)+cy)+"px;width:"+pxw+"px;height;"+h+"px'></i><i style='background-color:#FF0000;position:absolute;overflow:hidden;left:"+((ox-pxw+w+wod)+cx)+"px;top:"+((-h+oy+hod)+cy)+"px;width:"+pxw+"px;height;"+h+"px'></i><i style='background-color:#FF0000;position:absolute;overflow:hidden;left:"+((0-x+1)+cx)+"px;top:"+((-h+oy+hod)+cy)+"px;width:"+pxw+"px;height;"+h+"px'></i>";
                ox = x;   
                oy = y;   
            }   
            else  
            {   
                tt -= aa*((y<<1)-3);
                st -= (aa<<1)*(--y);
            }   
        } 
        return _html;
    }   
  
    /*画圆*/  
    var html = drawOval(100,100,600);   
  
    document.write(html);   
</script>