我在将一个圆分成7个部分时遇到问题。
目前，我有一条直线穿过圆心。
然后，它旋转并从画布的墙壁弹起。
我似乎无法弄清楚画出相等的7个线段并使它们在圆内旋转。
请查看我到目前为止的摘要。
任何帮助，将不胜感激。
提前致谢。
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<!--change cnavas border color to black-->
<style type="text/css">
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<!-- Canvas one used as container for canvas-->
<canvas id="canvasOne" ></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasOne");
var me = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
var animation;
var centerX = 125;
var centerY =125;
var radius = 100;
var ballDx = 2;
var ballDy = 2;
var theta = 0;
var thetaInc = 0.01;
function drawBall(){
me.clearRect(0,0,canvas.width,canvas.height);
centerX = centerX + ballDx;
centerY = centerY + ballDy;
me.beginPath();
me.arc(centerX,centerY,radius,0,Math.PI*2,false);
me.stroke();
me.fillStyle = "orange";
me.fill();
theta += thetaInc;
me.moveTo(centerX - radius*Math.cos(theta),centerY - radius*Math.sin(theta));
me.lineTo(centerX + radius*Math.cos(theta),centerY + radius*Math.sin(theta));
me.lineWidth = "2";
me.lineCap = "round";
me.strokeStyle = "black";
me.stroke();
if(centerY > canvas.height - radius || centerY - radius <0){
ballDy = -1*ballDy;
}
if(centerX > canvas.width - radius || centerX - radius < 0){
ballDx = -1*ballDx;
}
}
function animate(){
clearInterval(animation);
setInterval(drawBall,25);
}
animate();
</script>
</body>
</html>
最佳答案
如果我正确理解的话，您就快到了，但不是从圆上的点到相对的那一条画一条直线，而是从中心开始，以角度theta绘制七个半径，其角度增量为1/7 a圈。
因为moveTo在画布上开始一个新的子路径，所以您只需要在绘制所有半径后绘制半径。作为实现结果的简单修改的示例：
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<!--change cnavas border color to black-->
<style type="text/css">
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<!-- Canvas one used as container for canvas-->
<canvas id="canvasOne" ></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasOne");
var me = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
var animation;
var centerX = 125;
var centerY =125;
var radius = 100;
var ballDx = 2;
var ballDy = 2;
var theta = 0;
var thetaInc = 0.01;
var seventh = (Math.PI*2)/7; // add
var theta2 = 0; // add
function drawBall(){
me.clearRect(0,0,canvas.width,canvas.height);
centerX = centerX + ballDx;
centerY = centerY + ballDy;
me.beginPath();
me.arc(centerX,centerY,radius,0,Math.PI*2,false);
me.stroke();
me.fillStyle = "orange";
me.fill();
theta += thetaInc;
/* removed:
me.moveTo(centerX - radius*Math.cos(theta),centerY - radius*Math.sin(theta));
me.lineTo(centerX + radius*Math.cos(theta),centerY + radius*Math.sin(theta));
*/
for( var n = 0; n < 7; ++n) { // add loop to draw radii
theta2 = theta + n * seventh;
me.moveTo( centerX, centerY);
me.lineTo( centerX + radius*Math.cos(theta2), centerY + radius*Math.sin(theta2));
}
me.lineWidth = "2";
me.lineCap = "round";
me.strokeStyle = "black";
me.stroke();
if(centerY > canvas.height - radius || centerY - radius <0){
ballDy = -1*ballDy;
}
if(centerX > canvas.width - radius || centerX - radius < 0){
ballDx = -1*ballDx;
}
}
function animate(){
clearInterval(animation);
setInterval(drawBall,25);
}
animate();
</script>
</body>
</html>
但是，如果需要分别为段着色，则在描边或填充之前，需要将每个段绘制为两个半径的单独路径和2π/ 7弧度的弧线。