canvas根据角度画射线

最新推荐文章于 2022-01-05 10:13:26 发布

daily886

最新推荐文章于 2022-01-05 10:13:26 发布

阅读量1.3k

点赞数 1

分类专栏： html js canvas

本文链接：https://blog.csdn.net/daily886/article/details/107469767

版权

js 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏


            let ctx_line = canvas.getContext("2d"); 

            let centerX = canvas.width/2; //中心点
            let centerY = canvas.height/2; //中心点
            let arc_radius = 100;  //半径

            //画射线
            let x1,y1;
            arc_radius+=10;
            ctx_line.strokeStyle = "#ffffff";
            ctx_line.lineWidth = 6;
            ctx_line.beginPath();
            //定好中心点
            // 角度转弧度 = 角度/180*Math.PI
            x1 = centerX +  arc_radius * Math.cos(30 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(30 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(60 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(60 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(90 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(90 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(120 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(120 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(150 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(150 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(180 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(180 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(210 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(210 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(240 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(240 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(270 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(270 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(300 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(300 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(330 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(330 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            x1 = centerX +  arc_radius * Math.cos(360 * Math.PI / 180);
            y1 = centerY +arc_radius * Math.sin(360 *Math.PI /180);
            ctx_line.moveTo(centerX,centerY);
            ctx_line.lineTo(x1,y1);

            ctx_line.stroke();