如何使用html5将网格绘制成圆形

时间:2014-09-20 20:16:25

标签: javascript math html5-canvas physics game-physics

我正在尝试使用html5将网格绘制成圆圈,如下图所示使用纸张js: enter image description here

但是我无法理解,这个解决方案在javascript中的逻辑是什么。按照我的剧本:

for (var _q=0,_qmax=(2*Math.PI),_qstep=(Math.PI/20); _q<_qmax; _q+=_qstep)
        {

            _sx = x+Math.sin(_q)*_radius;
            _sy = y+Math.cos(_q)*_radius;

             var path=new Path();
            path.strokeColor='white';
            path.strokeWidth=2;             
            path.moveTo(_sx,_sy);
            path.lineTo(_sy,_sx);
        }

1 个答案:

答案 0 :(得分:1)

最后我能理解,那里有什么问题。很多人在没有正确答案的情况下给我否定投票。对他们说“让我成长”。使用画布x,y坐标跟随结构。

_draw_grid:function(_radius,_step,_color, _width)
    {
           var _group=new APP.RADAR.Group();
            for (var _q=0,_qmax=(2*Math.PI),_qstep=(Math.PI/_step); _q<_qmax; _q+=_qstep){
              _sx = APP.POSITION.x+Math.sin(_q)*_radius;
              _sy = APP.POSITION.y+Math.cos(_q)*_radius;

                var path=new APP.RADAR.Path();
                path.strokeColor=_color;
                path.strokeWidth=_width;
                path.moveTo(_sx,APP.POSITION.y*2-_sy);
                path.lineTo(_sx,_sy);
                _group.addChild(path);

            }
            for (var _q=0,_qmax=(2*Math.PI),_qstep=(Math.PI/_step); _q<_qmax; _q+=_qstep){
              _sx = APP.POSITION.x+Math.sin(_q)*_radius;
              _sy = APP.POSITION.y+Math.cos(_q)*_radius;

                var path=new APP.RADAR.Path();
                path.strokeColor=_color;
                path.strokeWidth=_width;
                path.moveTo(APP.POSITION.y*2-_sy,_sx);
                path.lineTo(_sy,_sx);
                _group.addChild(path);

            }
        return _group;
    },