我在将一个圆分成 7 block 时遇到问题。 目前我有一条线穿过圆的中心。 然后它旋转并从 Canvas 壁上弹起。 我似乎无法弄清楚绘制 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>
最佳答案
如果我理解正确的话，你就快到了，但是不要从圆上的一点到直径相对的一点画一条线，而是从中心开始，以 Angular theta开始绘制七个半径 Angular 增量为圆的 1/7。
因为moveTo在 Canvas 上启动了一个新的子路径，所以您只需要在绘制完所有半径后描边即可。作为实现结果的简单修改的示例:
<!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 弧度的弧的单独路径。
关于javascript - HTML5 Canvas 将圆弧分成7等份并旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46983868/