直接上搜索，就可以了，

这里计算的不是顶角度数，而是两个相邻定点与圆心之间形成的圆心角，就是360除以5，得到72deg了。

lineTo(x,y)里面的x,y的角度都需要同时修改，看你这个情况应该是只修改了x里面的角度。需要把y里面的角度也做处理

cos(A - B) = cosA * cos B + sinA * sinB;

cos(126) = cos180 * cos54 + sin180 * sin54

cos(126) = -1 * cos54 + 0 * sin54

cos(126) = -cos(54)

1. 圆心连接五个大圆上的点，会发现圆心由五个相同的角组成，每个角为360/5= 72度

2. 坐标轴右上方那个总共90度，减去72度，剩下的就是18度

3. 圆心连接的短的为角平分线，所以一个角是72/2=36度  36+18 = 54
   

有代码吗？你可以看下你的closepath 里面的 p是否是大写的 closePath()

我按照你的代码写出来并没有问题啊，是完整的五角星，你找找别的原因吧?

对源代码修改：

function drawStar(cxt,r,R,x,y,color,rot, lineWidth){

cxt.clearRect(0,0,800,800);//   <-------------------------在这里清除画布

cxt.beginPath();

    for (let i = 0; i < 5; i++) {

        cxt.lineTo(Math.cos((18 + i * 72- rot) / 180 * Math.PI) * R + x,

        -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y,

    );

        cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,

        -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y,

    );

}

cxt.closePath();

cxt.strokeStyle=color;

cxt.lineWidth = lineWidth;//   <-------------------这里添加要改变宽度的参数

cxt.stroke();

}

接下来定义动画：

function starAnimation( cxt ){  //   <-----------在这里定义canvas的画布对象

var i=5;  //这里是控制动画的变量

var w=5;    //这个是要改变的宽度变量

  setInterval(function () {

    if(i>5){

        drawStar(cxt, 200, 300, 400, 400, 'red', 30, w+=3);

        i++;

    }else{

        drawStar(cxt, 200, 300, 400, 400, 'red', 30, w-=3);

        i++;

    }

        if (i > 10) {

            i = 1;

        }

    }, 100);

}

接下来执行定义好的动画就OK了

starAnimation(context);  // <-----------传入   var context =canvas.getContext('2d');

贴一下所有代码

哈哈哈，我也是，改一下小圆的起启度数就可以

就是这段代码，将for循环内代码注释就起作用了。

canvas的长宽不能加px

已解决     o大写了

这个是高中数学问题，在直角坐标系上，当角<90°，以你要测得角作为三角形的一个角，你可以画出一个直角三角形，取得一系列坐标（坐标正负保留）这个角的对边除以斜边就是sin值,这个角的临边除以斜边就是这个角的cos值，大于90小于180，取它补角，然后用x坐标除以y坐标这是在角在极限情况下可以取到1或者-1

你没有stroke()啊,fill()也没有，两者至少留一个。

把对上边界的控制条件改成ball.y <= 0 时执行里面的内容，因为的你的竖直速度太小，进入这个条件时加量太小，一直会进入这个条件，所以小球会在上面下不来，逃逸不出来

一看就没仔细听上节课。。。。

老师都说了，ctx.beginPath()和ctx.lineTo()组合起来可以当作ctx.moveTo()来用。

context.lineTo()=(Math.cos((18+i*72)/180*Math.PI)300+400

这里300前面少了*

是不是参数传的不对？？比方说context，canvas，cxt参数。再找找，多比较一下

1、五角星，循环5次即可

2、脚本必须包含在script标签内

Math.cos()的参数值应该用弧度，Math.PI/180*60deg是把角度转换为弧度

1、之前少了<canvas id=canvas......></canvas>的一系列内容

2、然后路径规划完后少了绘制的过程，context.stroke()或者填充之类的

应该是你for循环的问题吧

逻辑差说明代码写的少，多练练就好了

两个圆是同心圆，但是两个圆的半径并没有特别大的关联，只是大小不同，做五角星只是和角度有关系

drawStar(     contxet    ,150,300,400,400,15);中的context写错了

因为要换算成弧度制

五角星一个内角是72°，这里两个红色射线之间的角度就是108°，然后减去90°，就得到18°了。

window.onload=function(){

var canvas=document.getElementById("canvas");

canvas.width=1000;

canvas.height=600;

var context=canvas.getContext("2d");

// context.beginPath();

// // for(var i=0;i<5;i++){

// // context.lineTo(Math.cos((18+72*i)/180*Math.PI)*200+300,-Math.sin((18+72*i)/180*Math.PI)*200+300);

// // context.lineTo(Math.cos((54+72*i)/180*Math.PI)*100+300,-Math.sin((54+72*i)/180*Math.PI)*100+300);

// // }

// context.closePath();

for(var j=0;j<8;j++){

drawStar(context,40,20,j+3,50+j*110,300);

context.stroke();

}

}

function drawStar(cxt,R,r,K,x,y){

cxt.beginPath();

for(var i=0;i<K;i++){

cxt.lineTo(Math.cos((360/K*i)/180*Math.PI)*R+x,-Math.sin((360/K*i)/180*Math.PI)*R+y);

cxt.lineTo(Math.cos((360/K*i+180/K)/180*Math.PI)*r+x,-Math.sin((360/K*i+180/K)/180*Math.PI)*r+y);

}  

cxt.closePath();

}