for(var i = 0; i < 20; i ++){
    var r = Math.random() * 10 + 10;
    var x = Math.random() * canvas.width/10; // 偏移量写成了10分之一
    var y = Math.random() * canvas.height/10; // 偏移量写成了10分之一
    var a = Math.random() * 360;
    console.log(r,x,y,a)
    frawStar(context , x , y , r , (r / 2.0) , a); // 参数位置写错了
    // 应该是frawStar(context ，内圆半径, 大圆半径, 偏移x , 偏移y , 旋转角度a);
}

改成如下即可

for(var i = 0; i < 20; i ++){
    var r = Math.random() * 10 + 10;
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var a = Math.random() * 360;
    console.log(r,x,y,a)
    frawStar(context , (r / 2.0), r, x , y  , a);//调用五角星函数
}

1. 颜色十六进制：#f00或者#ff0000（你缺了#）;

2. 你的drawStar函数的实参和形参不对应啊（粗心）。

可以，但要有足够的数学知识

[10，20) 说最大值为20也无所谓吧………这种事情也需要纠结吗……… 别太较真…………

有必要这么复杂么，直接控制x,y的值在正常显示范围内不就好了，可以根据大圆大R来计算x，y具体的范围值，比如x的范围值是  0+R 到 canvas.width-R，y值的范围也根据这个算出来就可以了，具体部分代码是：

for(var i = 0 ; i<110; i++){
    var r = Math.random()*10 + 10;
    
    var x = Math.max(Math.random() * canvas.width,r);
    x = Math.min(x,canvas.width - r);
    var y = Math.max(Math.random() * canvas.height,r);
    y = Math.min(y,canvas.height-r);

    var a = Math.random() * 360;
    wjx(content,x,y,r,r/2.0,"#ff7036","red",0,a);
}

写错了！！！！是这样子写的 context.fillRect(0,0,canvas.width,canvas.height);

这样不行吧  

if (Math.sqrt(Math.pow(ss[0][1]-x,2)+Math.pow(ss[0][2]-y,2))>ss[0][0]+r){
        kk(tex,r,r/2,x,y,rott);
    }
    不是应该与前面生成的所有坐标都进行比较吗 你这样貌似只比较了第一个生成的坐标与当前坐标的距离大于直径

const ju = Math.sqrt(Math.pow(jux,2) + Math.pow(juy, 2))

能不能说说 这段代码是什么意思呢？拜托了

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

context.fillStyle = "black";

context.fillRect( 0, 0, canvas.width, canvas.heihgt );//这里的height写错了

drawStar( context, 150, 300, 400, 400, 20 );

我发现问题了，29行和31行将400改成y即可，这里忘了修改了。

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/这个你看看同学，希望能帮到你

因为你没有写 cxt.fill() 

把已经生成的星星的中心点放到一个数组中，每次在生成下一个行星中心点的时候，对数组进行遍历比对，看是否重复

  for(var i=0;i<200;i++){         //利用json来创建200个随机星星
var aStar={
               x:Math.random()*canvas.width,
               y:Math.random()*canvas.height,
               R:Math.random()*5+5,
               a:Math.random()*360
};
           if(stars.length==0){           //如果数组里面没有星星，则直接添加一个
stars.push(aStar);
           }else{
               for (var i = 0; i < stars.length; i++) {        
                   var sum=0;              //遍历当前的数组，并创建一个局部变量sum，如果当前的星星与数组中的星星不重合不覆盖
                                           //则自加
if (Math.sqrt(Math.pow(aStar.x-stars[i].x,2)+Math.pow(aStar.y-stars[i].y,2))>aStar.R+stars[i].R) {
                      sum++;
                       if (sum==stars.length) {    //如果sum的值与当前数组的长度值一样，则表示该星星与数组中的任何一个星星都不
                                                   //重合
stars.push(aStar);
                       }
                   }
               }

这部分的循环变量i可能被污染了。

代码都不贴上来，谁知道为啥

x y那有问题

只要外层的父级是属于全局，那么这个for里面的就是全局，是不是全局是相对于父级来说

我运行了一次，发现你的效果也很酷啊。。。，其实是因为你的drawStar()的函数少写了一行“cxt.beginPath()”。（另外你的drawStar()函数应该放在window.onload外面。）

random()返回的是一个大于或等于 0 但小于 1 数字 是正确的，不可以等于1的，取值范围是[0,1)

var stars =[];
	$(function(){
		var canvas=$("#canvas");
		canvas.width=800;
		canvas.height=800;
		var context=canvas[0].getContext("2d");
		
		context.fillStyle="black";
		context.fillRect(0,0,canvas.width,canvas.height);
		addStars();
		upadteStars();
		console.log(stars.length);
		drowStarSky(context);

	})
//添加200个随机星星到星星的数组
function addStars() {
	// body...
		for (var i = 0; i < 200; i++) {
			var star={
 					r:Math.random()*10+10,
 					x:Math.random()*(canvas.width-40)+20,
 					y:Math.random()*(canvas.height-40)+20,
 					a:Math.random()*360
 				}
 				stars.push(star);
		};
}
//去掉重合的星星
	function upadteStars () {
			for (var i = 0; i < stars.length; i++) {
			for (var j = i+1; j < stars.length; j++) {
				var a=Math.pow(stars[i].x-stars[j].x,2);
				var b=Math.pow(stars[i].y-stars[j].y,2);
				var c=Math.pow(stars[i].r+stars[j].r,2)
				if(a+b<c){
					stars.splice(j,1);
				}
				
			};
			
		};
		
	}
	//将不重合的星星全部画入画布
	function drowStarSky(context){
		for (var i = 0; i < stars.length; i++) {
			drowStar(stars[i].r/2,stars[i].r,stars[i].x,stars[i].y,context,stars[i].a);
		};

	}
	//画一个星星

	function drowStar (r,R,x,y,ctx,rot) {
		ctx.beginPath();
		for (var i = 0; i < 5; i++) {
			ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
			ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y)

		};
		ctx.closePath();

		ctx.lineJoin="round";
		ctx.lineStyle="#058";
		ctx.lineWidth=5;
		ctx.fillStyle="yellow"
		ctx.fill();
		ctx.stroke();

	}

可以看啊，刚看完，是不是网速问题

你的随机号Math.randow()写错了，应该是Math.random()

//防止星星出了星空的边界 直接从随机值开始下手是最好处理的

var option= {
   r : Math.random() * 10 + 10,
   rotate : Math.random() * 360 };
option.x = Math.random() * (canvas.width - (option.r * 2)) + option.r;
option.y = Math.random() * (canvas.height - (option.r * 2)) + option.r;

在canvas画星的一秒间隔里画个一样的背景覆盖呗：

function clear(){
  context.fillStyle = "black";
  context.fillRect(0, 0, canvas.width, canvas.height);
}
window.setInterval(clear,990);

像这样。

把其中一个i循环的i变成j就可以了吧

我的想法是判断两个点之间的距离是否少于两个五角星大圆半径，若少于则证明重合

这点老师讲得不准确