                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

哪位大佬指点一下，如何让星星随机放置的时候，不出现画布边缘外面。

我自己的思路是
判断 x 和 y 的数值，可以判断出，会不会出大于或小于画布的宽高，之后星星的其他点都设置好了，如果直接改出画布的点的数值，会出现问题。
我打算在在画星星for循环里进行判断，如果出现了超出边界的星星，就提跳出方法，画下一个，这个就不画了，不过这样不好，减少了星星的绘制数量。想知道不减少星星数量绘制出有星星，并且不超出边界

大黑1997

2018-08-26

源自：Canvas绘图详解 4-1

关注问题我要回答

1358

操作

收起

2 回答

对酌回答被采纳 +2 积分
2018-09-12

有必要这么复杂么，直接控制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);
}

3 回复有任何疑惑可以回复我~

收起回答

大黑1997 提问者
2018-08-27

//我是通过求出原点，判断最顶端和最低端是否超过边缘，若超出，则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);
    }
}