我在使用 HTML5 Canvas 旋转圆圈时遇到问题。我正在创建一个用作加载计的圆圈。现在，加载部分(浅绿色)从 45 度标记处开始。我似乎无法弄清楚如何让这部分从 0 度标记开始。任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>guage</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<p>Your browser does not support canvas.</p>
<script src="http://127.0.0.1:3000/guage.js" charset="utf-8"></script>
</body>
</html>
对于 Javascript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//background color
ctx.fillStyle = "rgb(52, 70, 105)";
ctx.fillRect(0, 0, canvas.height, canvas.width);
//drawing circle
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(66, 70, 67)";
ctx.arc(150,125, 75, 0, 2 * Math.PI);
ctx.stroke();
//generate random number between 0.01 and 1.99 since
//fill of circle is created with respect to radians.
var precision = 3;
var rando = parseFloat(Math.min(0.01 + (Math.random() * (1.99 - 0.01)),1.99).toFixed(2));
//calculate percent for display in center.
var percent = Math.round((rando * 500) / 10);
//Create fill for circle
var angle = 90 * (Math.PI / 180);
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(24, 242, 92)";
ctx.arc(150,125, 75, 0, rando * Math.PI);
ctx.stroke();
//Create percent in middle of circle
ctx.font = "20px Verdana";
ctx.fillStyle = "rgb(24, 242, 92)";
ctx.fillText(percent +"%", 135, 135);
这是浏览器中输出的屏幕截图: 有没有办法将圆圈向后旋转 45 度？或者你们有没有我完全忽略了在这个例子中尝试的替代建议？
提前致谢!
最佳答案
创建圆时，需要将起始弧设置为顶部。 .arc() 的第四个参数是起始位置。只需将它设置为 -Math.PI/2，您将从顶部开始。
//Create fill for circle
var angle = 90 * (Math.PI / 180);
ctx.beginPath();
ctx.lineWidth = "20";
ctx.strokeStyle = "rgb(24, 242, 92)";
ctx.arc(150,125, 75, -Math.PI/2, rando * Math.PI); // The fourth argument here
ctx.stroke();
https://jsfiddle.net/3oknq4km/1/以供引用。 (尽管固定为 75%)
关于javascript - 旋转圆形 Canvas javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41007585/