我自己的思路是
判断 x 和 y 的数值,可以判断出,会不会出大于或小于画布的宽高,之后星星的其他点都设置好了,如果直接改出画布的点的数值,会出现问题。
我打算在在画星星for循环里进行判断,如果出现了 超出边界的星星,就提跳出方法,画下一个,这个就不画了,不过这样不好,减少了星星的绘制数量。想知道不减少星星数量绘制出有星星,并且不超出边界
有必要这么复杂么,直接控制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); }
//我是通过求出原点,判断最顶端和最低端是否超过边缘,若超出,则i-- 重新循环这次星星的绘制; for (var j = 0; j < 200; j++) { let R=Math.random()*15+5; let x=Math.random() * canvas.width;//偏移量 let y=Math.random() * canvas.height;//偏移量 var x_=Math.cos(90 / 180 * Math.PI) * R + x;//求出原点坐标 var y_=-Math.sin(90 / 180 * Math.PI) * R + y + R;//求出原点坐标 if(x_-R<0||x_+R>canvas.width){ j--; }else if (y_-R<0||y_+ R>canvas.height){ j--; }else{ drawStart(c , R , R/2.0 , x , y); } }