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

为什么我的星星都在一坨？

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

window.onload = function () {

let canvas = document.getElementById('star');

canvas.width = 800;

canvas.height = 800;

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

context.fillStyle = 'black';

context.fillRect( 0,0,canvas.width,canvas.height);

// frawStar(context,150,300,400,400,30);//调用五角星函数

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

var r = Math.random() * 10 + 10;

var x = Math.random() * canvas.width/10;

var y = Math.random() * canvas.height/10;

var a = Math.random() * 360;

console.log(r,x,y,a)

frawStar(context , x , y , r , (r / 2.0) , a);//调用五角星函数

}

// context.lineWidth = 10;

context.stroke();

}

//五角星的函数

/* r 小圆半径，R大圆半径，x 偏移值x坐标，y 偏移值 y坐标，rot五角星旋转角度*/

function frawStar(cxt, r, R, x, y, rot) {

cxt.beginPath();

for (var 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.fillStyle = '#fb3';

// cxt.fillStyle = '#fff';

cxt.strokeStyle = '##fd5';

cxt.lineWidth = 3;

cxt.lineJoin = 'round';

cxt.fill();

cxt.stroke();

}

</script>

</body>

</html>

weixin_慕工程9554846

2023-03-07

源自：Canvas绘图详解 4-1

关注问题我要回答

1478

操作

收起

1 回答

slongzhang
2023-05-07

 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);//调用五角星函数
}