为什么我的星星都在一坨？
weixin_慕工程9554846
2023-03-07 21:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="star" ></canvas>
<script>
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>
1回答
-
- slongzhang
- 2023-05-07 22:48:30
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);//调用五角星函数 }
Canvas绘图详解
72881 学习 · 422 问题
相似问题